@stack-spot/portal-layout 0.0.65 → 1.0.0-stg.1768483038644

package/dist/LayoutOverlayManager.js

@@ -1,14 +1,16 @@
 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 { last } from 'lodash';
 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
@@ -31,12 +33,6 @@ class LayoutOverlayManager {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "onModalClose", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         /**
          * Last element with focus before an overlay is shown.
          */
@@ -46,53 +42,111 @@ class LayoutOverlayManager {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "showToaster", {
+        Object.defineProperty(this, "modals", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "panels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        /**
+         * 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() {
-        this.elements = getLayoutElements();
-        this.elements.backdrop?.addEventListener('mousedown', (event) => {
-            if (this.isModalOpen())
-                !this.elements?.modal?.contains?.(event.target) && this.closeModal();
-            else if (this.isRightPanelOpen())
-                !this.elements?.rightPanel?.contains?.(event.target) && this.closeRightPanel();
-            else
+    closeCustomBackdrops(elements) {
+        // this is the easiest way to close each custom backdrop by calling their respective "onClose" callbacks. This is a hidden button
+        // that exists in every <Backdrop> component.
+        elements.forEach(element => element.querySelector('[data-custom-backdrop-close]')?.click?.());
+    }
+    onClickBackdrop(event) {
+        if (this.isModalOpen())
+            !this.elements?.modal?.contains?.(event.target) && this.closeModal();
+        else if (this.isRightPanelOpen())
+            !this.elements?.rightPanel?.contains?.(event.target) && this.closeRightPanel();
+        else {
+            const customBackdrops = this.getAllVisibleCustomBackdrops();
+            if (customBackdrops.length) {
+                let isClickInside = false;
+                customBackdrops.forEach((element) => {
+                    if (element.contains(event.target))
+                        isClickInside = true;
+                });
+                if (!isClickInside)
+                    this.closeCustomBackdrops(customBackdrops);
+            }
+            else {
                 this.setMainContentInteractivity(true);
-        });
-        this.elements.backdrop?.addEventListener('keydown', (event) => {
-            if (event.key !== 'Escape')
-                return;
-            if (this.isModalOpen())
-                this.closeModal();
-            if (this.isRightPanelOpen())
-                this.closeRightPanel();
+            }
+        }
+    }
+    onPressKeyInBackdrop(event) {
+        if (event.key !== 'Escape')
+            return;
+        if (this.isModalOpen())
+            this.closeModal();
+        if (this.isRightPanelOpen())
+            this.closeRightPanel();
+        else {
+            const customBackdrops = this.getAllVisibleCustomBackdrops();
+            if (customBackdrops.length)
+                this.closeCustomBackdrops(customBackdrops);
             else
                 this.setMainContentInteractivity(true);
-            event.preventDefault();
-        });
+        }
+        event.preventDefault();
+    }
+    setupElements() {
+        this.elements = getLayoutElements();
+        this.elements.backdrop?.addEventListener('mousedown', (event) => this.onClickBackdrop(event));
+        this.elements.backdrop?.addEventListener('keydown', (event) => this.onPressKeyInBackdrop(event));
         this.setInteractivity(this.elements?.modal, false);
         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
+    getAllVisibleCustomBackdrops() {
+        return document.querySelectorAll('[data-custom-backdrop-visibility=true]');
+    }
+    /**
+     * Setup the overlay layout elements.
+     * @returns the content for the modal, rightPanel and bottomDialog.
+     * @internal
+     */
     useOverlays() {
         useLayoutEffect(() => {
             if (!this.elements)
                 this.setupElements();
         }, []);
-        const [modal, setModal] = useState();
-        const [rightPanel, setRightPanel] = useState();
+        const [modal, setModal] = useState([]);
+        const [rightPanel, setRightPanel] = useState([]);
         const [bottomDialog, setBottomDialog] = useState();
-        this.setContent.modal = setModal;
-        this.setContent.rightPanel = setRightPanel;
+        this.setContent.modal = (content) => {
+            this.modals = content;
+            setModal(content);
+        };
+        this.setContent.rightPanel = (content) => {
+            this.panels = content;
+            setRightPanel(content);
+        };
         this.setContent.bottomDialog = setBottomDialog;
         return { modal, rightPanel, bottomDialog };
     }
+    /**
+     * 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');
@@ -109,88 +163,226 @@ class LayoutOverlayManager {
         this.setInteractivity(this.elements?.menu, interactive);
         this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible');
     }
-    showOverlay(element, extraClasses = [], blockMainContent = true) {
+    showOverlay(element, extraClasses = [], blockMainContent = true, manageClasses = true, ignoreFirstFocusOnCloseButton = true) {
         this.lastActiveElement = document.activeElement;
-        element?.classList.add('visible', ...extraClasses);
+        if (manageClasses)
+            element?.classList.add('visible', ...extraClasses);
         this.setInteractivity(element, true);
         if (blockMainContent)
             this.setMainContentInteractivity(false);
-        setTimeout(() => focusFirstChild(element, { priority: [['input', 'textarea', 'select', 'other', 'button']], ignore: `#${CLOSE_OVERLAY_ID}` }), 50);
+        setTimeout(() => focusFirstChild(element, {
+            priority: [['input', 'textarea', 'select', 'other', 'button']],
+            ...(ignoreFirstFocusOnCloseButton ? { ignore: `#${CLOSE_OVERLAY_ID}` } : {}),
+        }), 50);
     }
-    hideOverlay(element) {
-        element?.setAttribute('class', '');
+    hideOverlay(element, manageClasses = true) {
+        if (manageClasses)
+            element?.setAttribute('class', '');
         this.setInteractivity(element, false);
         this.setMainContentInteractivity(true);
     }
+    /**
+     * Shows the backdrop. The element passed as parameter must be a child of backdrop. Some accessibility features will be attached to
+     * the element.
+     *
+     * Consider using the component <Backdrop> from this library instead of calling this function directly.
+     * @param element the element to show inside the backdrop. It must already be a child of the backdrop.
+     */
+    showBackdrop(element) {
+        this.showOverlay(element, [], true, false);
+    }
+    /**
+     * Closes the backdrop. The element passed as parameter must be a child of backdrop. Some accessibility features will be run on the
+     * element.
+     *
+     * Consider using the component <Backdrop> from this library instead of calling this function directly.
+     * @param element the element showing inside the backdrop. It must be a child of the backdrop.
+     */
+    closeBackdrop(element) {
+        this.hideOverlay(element, false);
+        const lastActiveElement = this.lastActiveElement;
+        lastActiveElement?.focus?.();
+    }
+    /**
+     * @returns true if the modal is currently opened. False otherwise.
+     */
     isModalOpen() {
         return this.elements?.modal?.classList.contains('visible') ?? false;
     }
+    /**
+     * @returns the number of modals currently tracked.
+     */
+    getNumberOfOpenModals() {
+        return this.modals.length;
+    }
+    /**
+     * @returns the number of right panels currently tracked.
+     */
+    getNumberOfOpenRightPanels() {
+        return this.panels.length;
+    }
+    /**
+     * @returns true if the right panel is currently opened. False otherwise.
+     */
     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;
     }
-    showCustomModal(content, { size = 'medium', onClose } = {}) {
+    /**
+     * 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, ignoreFirstFocusOnCloseButton = true, stack = false, id } = {}) {
         if (!this.elements?.modal)
             throw new ElementNotFound('modal', elementIds.modal);
         if (!this.setContent.modal)
             throw new LayoutError('unable to show modal, because it has not been setup yet.');
-        this.onModalClose = onClose;
-        this.setContent.modal(content);
-        this.showOverlay(this.elements.modal, [size]);
+        const modal = { element: content, onClose, size, stack, id };
+        const currentModalSize = last(this.modals)?.size;
+        this.setContent.modal(stack ? [...this.modals, modal] : [modal]);
+        // we should remove the previous size, if any, before showing the modal
+        if (currentModalSize)
+            this.elements.modal.classList.remove(currentModalSize);
+        this.showOverlay(this.elements.modal, [size], true, true, ignoreFirstFocusOnCloseButton);
     }
-    showModal({ size, ...props }) {
-        this.showCustomModal(_jsx(OverlayContent, { ...props, onClose: () => this.closeModal(), type: "modal" }), { size, onClose: props.onClose });
+    /**
+     * 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, ignoreFirstFocusOnCloseButton, stack, onGoBack, id, ...props }) {
+        const handleBack = onGoBack ?? ((stack && this.modals.length >= 1) ? () => this.popModal() : undefined);
+        this.showCustomModal(_jsx(OverlayContent, { ...props, onGoBack: handleBack, onClose: () => this.closeModal(), type: "modal" }), { size, onClose: props.onClose, ignoreFirstFocusOnCloseButton, stack, id });
     }
-    showDialog(options) {
+    showDialog({ ignoreFirstFocusOnCloseButton = false, options, size = 'small' }) {
         let dialogResult = false;
         return new Promise((resolve, reject) => {
             try {
-                this.showCustomModal(_jsx(Dialog, { ...options, onCancel: () => this.closeModal(), onConfirm: () => {
-                        dialogResult = true;
-                        this.closeModal();
-                    } }), { size: 'small', onClose: () => resolve(dialogResult) });
+                if (options.type === 'panel') {
+                    this.showCustomRightPanel(_jsx(Dialog, { ...options, onCancel: () => this.closeModal(), onConfirm: () => {
+                            dialogResult = true;
+                            this.closeModal();
+                        } }), { size: size, onClose: () => resolve(dialogResult) });
+                }
+                else {
+                    this.showCustomModal(_jsx(Dialog, { ...options, onCancel: () => this.closeModal(), onConfirm: () => {
+                            dialogResult = true;
+                            this.closeModal();
+                        } }), { size, onClose: () => resolve(dialogResult), ignoreFirstFocusOnCloseButton });
+                }
             }
             catch (error) {
                 reject(error);
             }
         });
     }
-    confirm({ confirm, cancel, ...options }) {
+    /**
+     * 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 and its size: {@link DialogOptions}.
+     * @returns a promise that resolves with the user's answer.
+     */
+    confirm({ confirm, cancel, size, ...options }) {
         const t = getDictionary();
-        return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel });
+        return this.showDialog({
+            ignoreFirstFocusOnCloseButton: !!options.validation,
+            size,
+            options: {
+                ...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 });
+        await this.showDialog({
+            ignoreFirstFocusOnCloseButton: !!options.validation,
+            options: {
+                ...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.showOverlay(this.elements?.bottomDialog, undefined, false);
+            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, true, true);
         });
     }
-    showCustomRightPanel(content, { size = 'medium', onClose } = {}) {
+    /**
+     * 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, ignoreFirstFocusOnCloseButton = true, stack = false, id } = {}) {
         if (!this.elements?.rightPanel)
             throw new ElementNotFound('right panel overlay', elementIds.rightPanel);
         if (!this.setContent.rightPanel)
             throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.');
-        this.onModalClose = onClose;
-        this.setContent.rightPanel(content);
-        this.elements?.rightPanel.classList.add(size);
+        const panel = { element: content, onClose, size, stack, id };
+        const currentPanelSize = last(this.modals)?.size;
+        this.setContent.rightPanel(stack ? [...this.panels, panel] : [panel]);
+        // we should remove the previous size, if any, before showing the panel
+        if (currentPanelSize)
+            this.elements.rightPanel.classList.remove(currentPanelSize);
         setTimeout(() => {
-            this.showOverlay(this.elements?.rightPanel);
+            this.showOverlay(this.elements?.rightPanel, [size], true, true, ignoreFirstFocusOnCloseButton);
         });
     }
-    showRightPanel({ size, ...props }) {
-        this.showCustomRightPanel(_jsx(OverlayContent, { ...props, onClose: () => this.closeRightPanel(), type: "panel" }), { size, onClose: props.onClose });
-    }
     /**
+     * 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, ignoreFirstFocusOnCloseButton, stack, onGoBack, id, ...props }) {
+        const handleBack = onGoBack ?? ((stack && this.panels.length >= 1) ? () => this.popRightPanel() : undefined);
+        this.showCustomRightPanel(_jsx(OverlayContent, { ...props, onGoBack: handleBack, onClose: () => this.closeRightPanel(), type: "panel" }), { size, onClose: props.onClose, ignoreFirstFocusOnCloseButton, stack, id });
+    }
+    /*
      * 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,59 +390,158 @@ class LayoutOverlayManager {
         focusAccessibleElement(this.lastActiveElement);
         this.lastActiveElement = null;
     }
+    /**
+     * Closes all opened modals.
+     * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
+     */
     closeModal(runCloseListener = true) {
         this.elements?.modal?.classList.remove('visible');
-        this.elements?.backdrop?.setAttribute('class', '');
-        if (runCloseListener && this.onModalClose) {
-            const onClose = this.onModalClose;
-            // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
-            this.onModalClose = undefined;
-            onClose();
+        const shouldHideBackdrop = this.panels.length === 0;
+        if (shouldHideBackdrop)
+            this.elements?.backdrop?.setAttribute('class', '');
+        if (runCloseListener) {
+            this.modals.forEach((modal) => {
+                const onClose = modal.onClose;
+                // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
+                modal.onClose = undefined;
+                onClose?.();
+            });
         }
         const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000;
         setTimeout(() => {
-            if (this.elements?.backdrop?.classList.contains('visible')) {
+            if (shouldHideBackdrop && this.elements?.backdrop?.classList.contains('visible')) {
                 // eslint-disable-next-line no-console
                 console.warn(multipleCallsWarning('modal', animationMS));
                 this.elements?.modal?.classList.remove('visible');
             }
             if (this.setContent.modal)
-                this.setContent.modal(undefined);
-            this.hideOverlay(this.elements?.modal);
+                this.setContent.modal([]);
+            if (shouldHideBackdrop)
+                this.hideOverlay(this.elements?.modal);
             this.focusLastActiveElement();
         }, animationMS);
     }
+    /**
+     * Closes the top-most modal in the stack. Will behave like `closeModal` if only a single modal exists in the stack.
+     * @param amount number of modals to pop. Defaults to 1.
+     * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
+     */
+    popModal(amount = 1, runCloseListener = true) {
+        if (amount <= 0)
+            return;
+        if (this.modals.length <= amount)
+            return this.closeModal(runCloseListener);
+        for (let i = 0; i < amount; i++) {
+            const modalToClose = this.modals.pop(); // "!": because of the second "if", the array can't have less than "amount + 1" elements
+            if (runCloseListener)
+                modalToClose.onClose?.();
+            this.elements?.modal?.classList.remove(modalToClose.size);
+        }
+        const topModal = last(this.modals); // "!": because of the second "if", the array can't have less than "amount + 1" elements
+        this.elements?.modal?.classList.add(topModal.size);
+        this.setContent.modal?.([...this.modals]);
+    }
+    /**
+     * Close all modals in the stack of modal until the modal with the given id is found. If no modal with the given id is found, nothing
+     * happens.
+     * @param id the id of the modal to pop to.
+     * @param inclusive when true, the modal with the given id is also popped. Defaults to false.
+     */
+    popModalTo(id, inclusive = false) {
+        const index = this.modals.findIndex(m => m.id === id);
+        if (index >= 0)
+            this.popModal(this.modals.length - index - (inclusive ? 0 : 1));
+    }
+    /**
+     * Closes all opened right panels.
+     * @param runCloseListener whether or not to run the function `onClose` passed to `showRightPanel` or `showCustomRightPanel`. Defaults to
+     * true.
+     */
     closeRightPanel(runCloseListener = true) {
         this.elements?.rightPanel?.classList.remove('visible');
-        this.elements?.backdrop?.setAttribute('class', '');
-        if (runCloseListener && this.onModalClose) {
-            const onClose = this.onModalClose;
-            // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
-            this.onModalClose = undefined;
-            onClose();
+        const shouldHideBackdrop = this.modals.length === 0;
+        if (shouldHideBackdrop)
+            this.elements?.backdrop?.setAttribute('class', '');
+        if (runCloseListener) {
+            this.panels.forEach((panel) => {
+                const onClose = panel.onClose;
+                // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
+                panel.onClose = undefined;
+                onClose?.();
+            });
         }
         const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000;
         setTimeout(() => {
-            if (this.elements?.backdrop?.classList.contains('visible')) {
+            if (shouldHideBackdrop && this.elements?.backdrop?.classList.contains('visible')) {
                 // eslint-disable-next-line no-console
                 console.warn(multipleCallsWarning('rightPanel', animationMS));
                 this.elements?.rightPanel?.classList.remove('visible');
             }
             if (this.setContent.rightPanel)
-                this.setContent.rightPanel(undefined);
-            this.hideOverlay(this.elements?.rightPanel);
+                this.setContent.rightPanel([]);
+            if (shouldHideBackdrop)
+                this.hideOverlay(this.elements?.rightPanel);
             this.focusLastActiveElement();
         }, animationMS);
     }
+    /**
+     * Closes the top-most modal in the stack. Will behave like `closeModal` if only a single modal exists in the stack.
+     * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
+     */
+    popRightPanel(amount = 1, runCloseListener = true) {
+        if (amount <= 0)
+            return;
+        if (this.panels.length <= amount)
+            return this.closeRightPanel(runCloseListener);
+        for (let i = 0; i < amount; i++) {
+            const panelToClose = this.panels.pop(); // "!": because of the second "if", the array can't have less than "amount + 1" elements
+            if (runCloseListener)
+                panelToClose.onClose?.();
+            this.elements?.rightPanel?.classList.remove(panelToClose.size);
+        }
+        const topPanel = last(this.panels); // "!": because of the second "if", the array can't have less than "amount + 1" elements
+        this.elements?.rightPanel?.classList.add(topPanel.size);
+        this.setContent.rightPanel?.([...this.panels]);
+    }
+    /**
+     * Close all right panels in the stack of panels until the panel with the given id is found. If no panel with the given id is found,
+     * nothing happens.
+     * @param id the id of the right panel to pop to.
+     * @param inclusive when true, the right panel with the given id is also popped. Defaults to false.
+     */
+    popRightPanelTo(id, inclusive = false) {
+        const index = this.panels.findIndex(m => m.id === id);
+        if (index >= 0)
+            this.popRightPanel(this.panels.length - index - (inclusive ? 0 : 1));
+    }
+    /**
+     * Closes the bottom dialog if it's open.
+     */
     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