,
+ };
+
+ render(
+ wrapIntl(),
+ );
+
+ // The modal should be in the document
+ expect(screen.getByText('Regular Modal')).toBeInTheDocument();
+ expect(screen.getByText('Regular Modal Content')).toBeInTheDocument();
+
+ // Regular modals should have a backdrop
+ // We can't directly test the backdrop since it's controlled by react-bootstrap
+ // But we can verify the modal displayed correctly and has the expected aria attributes
+ expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+ });
+
+ test('stacked modals have shouldRenderBackdrop=true but pass backdrop=false to Modal', () => {
+ const props = {
+ show: true,
+ onHide: jest.fn(),
+ modalHeaderText: 'Stacked Modal',
+ isStacked: true,
+ children:
Stacked Modal Content
,
+ };
+
+ render(
+ wrapIntl(),
+ );
+
+ // The modal should be in the document
+ expect(screen.getByText('Stacked Modal')).toBeInTheDocument();
+ expect(screen.getByText('Stacked Modal Content')).toBeInTheDocument();
+
+ // We can't directly test the backdrop since it's controlled by react-bootstrap
+ // But we can verify the modal displayed correctly and has the expected aria attributes
+ expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+ });
+
+ test('stacked modals do not render their own backdrop', () => {
+ // This test verifies that stacked modals don't render their own backdrop through GenericModal
+ const stackedProps = {
+ show: true,
+ onHide: jest.fn(),
+ modalHeaderText: 'Stacked Modal',
+ id: 'stackedModal',
+ isStacked: true,
+ children:
Stacked Modal Content
,
+ };
+
+ render(
+ wrapIntl(),
+ );
+
+ // The modal should be in the document
+ expect(screen.getByText('Stacked Modal')).toBeInTheDocument();
+ expect(screen.getByText('Stacked Modal Content')).toBeInTheDocument();
+
+ // The modal should have aria-modal="true"
+ expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+ });
+ });
+
+ describe('Direct Hook Tests - Basic Functionality', () => {
+ test('regular modals should render their own backdrop', () => {
+ render();
+
+ expect(screen.getByTestId('should-render-backdrop')).toHaveTextContent('true');
+ expect(screen.getByTestId('modal-z-index')).toHaveTextContent('none');
+ });
+
+ test('stacked modals should have increased z-index', () => {
+ render();
+
+ // Verify exact z-index calculation
+ const expectedZIndex = BASE_MODAL_Z_INDEX + Z_INDEX_INCREMENT;
+ expect(screen.getByTestId('modal-z-index')).toHaveTextContent(expectedZIndex.toString());
+ });
+ });
+
+ describe('Direct Hook Tests - Backdrop Manipulation', () => {
+ test('stacked modals should modify parent backdrop opacity', () => {
+ render();
+
+ // The hook should have modified the most recent backdrop (mockBackdrop2)
+ expect(mockBackdrop2.style.opacity).toBe('0');
+ });
+
+ test('stacked modals should set transition property on parent backdrop', () => {
+ render();
+
+ // Verify the transition property is set correctly
+ expect(mockBackdrop2.style.transition).toBe('opacity 150ms ease-in-out');
+ });
+
+ test('stacked modals should calculate backdrop z-index correctly', () => {
+ render();
+
+ // The hook should calculate the backdrop z-index as stackedModalZIndex - 1
+ // Where stackedModalZIndex = BASE_MODAL_Z_INDEX + Z_INDEX_INCREMENT
+ const expectedBackdropZIndex = (BASE_MODAL_Z_INDEX + Z_INDEX_INCREMENT) - 1;
+
+ // We can't directly test this since the hook doesn't expose the backdrop z-index,
+ // but we can verify the hook's behavior by checking the modalStyle z-index
+ // and inferring that the backdrop z-index would be one less
+ const modalZIndex = parseInt(screen.getByTestId('modal-z-index').textContent || '0', 10);
+ expect(modalZIndex - 1).toBe(expectedBackdropZIndex);
+ });
+
+ test('cleanup should restore original backdrop properties', () => {
+ const {unmount} = render();
+
+ // The hook should have modified the parent backdrop
+ expect(mockBackdrop2.style.opacity).toBe('0');
+
+ // Unmount to trigger cleanup
+ unmount();
+
+ // Original opacity should be restored
+ expect(mockBackdrop2.style.opacity).toBe('0.5');
+
+ // Transition property should still be set for smooth fade-in
+ expect(mockBackdrop2.style.transition).toBe('opacity 150ms ease-in-out');
+ });
+ });
+});
diff --git a/webapp/platform/components/src/hooks/useStackedModal.ts b/webapp/platform/components/src/hooks/useStackedModal.ts
new file mode 100644
index 00000000000..2c710303d5f
--- /dev/null
+++ b/webapp/platform/components/src/hooks/useStackedModal.ts
@@ -0,0 +1,145 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useLayoutEffect, useMemo, useRef, useState} from 'react';
+
+const BASE_MODAL_Z_INDEX = 1050; // Bootstrap default modal z-index
+const BASE_BACKDROP_Z_INDEX = 1040; // Bootstrap default backdrop z-index
+const Z_INDEX_INCREMENT = 10; // Increment for each stacked modal level
+
+// No options needed since delayMs is not used by any consumers
+
+type StackedModalResult = {
+
+ /**
+ * Whether the modal should render its own backdrop
+ */
+ shouldRenderBackdrop: boolean;
+
+ /**
+ * Style object for the modal element
+ */
+ modalStyle: React.CSSProperties;
+
+ /**
+ * Reference to the parent modal element (if this is a stacked modal)
+ */
+ parentModalRef: React.RefObject;
+};
+
+/**
+ * A hook that manages stacked modals, controlling backdrop visibility and z-index values.
+ *
+ * @param isStacked Whether this modal is stacked on top of another modal
+ * @param isOpen Whether the modal is currently open
+ * @returns An object with properties to control modal and backdrop rendering
+ */
+export function useStackedModal(
+ isStacked: boolean,
+ isOpen: boolean,
+): StackedModalResult {
+ // State to track whether this modal should render its own backdrop
+ const [shouldRenderBackdrop, setShouldRenderBackdrop] = useState(!isStacked);
+
+ // State to track z-index values
+ const [zIndexes, setZIndexes] = useState({
+ modal: BASE_MODAL_Z_INDEX,
+ backdrop: BASE_BACKDROP_Z_INDEX,
+ });
+
+ // Ref to store the parent modal element
+ const parentModalRef = useRef(null);
+
+ // Ref to store the original z-index of the parent modal's backdrop
+ const originalBackdropZIndexRef = useRef(null);
+
+ // Ref to store the parent modal's backdrop element
+ const backdropRef = useRef(null);
+
+ // Ref to store the original opacity of the parent modal's backdrop
+ const originalBackdropOpacityRef = useRef(null);
+
+ useLayoutEffect(() => {
+ // If this is not a stacked modal or not open, do nothing
+ if (!isStacked || !isOpen) {
+ return;
+ }
+
+ // No timeout needed since we're not using delay
+
+ // Function to adjust the backdrop for stacked modals
+ const adjustBackdrop = () => {
+ // For stacked modals, we want to render our own backdrop
+ setShouldRenderBackdrop(true);
+
+ // Calculate the z-index for the stacked modal
+ const stackedModalZIndex = BASE_MODAL_Z_INDEX + Z_INDEX_INCREMENT;
+
+ // Update the z-index for this modal and its backdrop
+ // The backdrop should be above the parent modal (1050) but below the stacked modal
+ setZIndexes({
+ modal: stackedModalZIndex,
+ backdrop: stackedModalZIndex - 1, // This is 1050 + 10 - 1 = 1059
+ });
+
+ // Adjust the parent backdrop's opacity and z-index
+ if (typeof document !== 'undefined') {
+ // Find all existing backdrops in the DOM
+ const backdrops = document.querySelectorAll('.modal-backdrop');
+ if (backdrops.length > 0) {
+ // Get the most recent backdrop (the one with the highest z-index)
+ // This should be the backdrop of the parent modal
+ const parentBackdrop = backdrops[backdrops.length - 1] as HTMLElement;
+ backdropRef.current = parentBackdrop;
+ originalBackdropZIndexRef.current = parentBackdrop.style.zIndex || String(BASE_BACKDROP_Z_INDEX);
+ originalBackdropOpacityRef.current = parentBackdrop.style.opacity || '0.5'; // Default Bootstrap backdrop opacity
+
+ // Add a transition for smooth opacity change
+ parentBackdrop.style.transition = 'opacity 150ms ease-in-out';
+ parentBackdrop.style.opacity = '0';
+ }
+ }
+ };
+
+ // Adjust the backdrop immediately (no delay option)
+ adjustBackdrop();
+
+ // Cleanup function
+ // eslint-disable-next-line consistent-return
+ return () => {
+ // Restore original backdrop properties
+ if (backdropRef.current) {
+ if (originalBackdropZIndexRef.current) {
+ // Restore original z-index if it was stored
+ backdropRef.current.style.zIndex = originalBackdropZIndexRef.current;
+ }
+
+ if (originalBackdropOpacityRef.current) {
+ // Restore original opacity if it was stored
+ // Keep the transition for a smooth fade-in
+ backdropRef.current.style.transition = 'opacity 150ms ease-in-out';
+ backdropRef.current.style.opacity = originalBackdropOpacityRef.current;
+ }
+
+ // Clear refs
+ backdropRef.current = null;
+ originalBackdropZIndexRef.current = null;
+ originalBackdropOpacityRef.current = null;
+ }
+ };
+ }, [isOpen, isStacked]);
+
+ const modalStyle = useMemo(() => {
+ return isStacked ? {
+ zIndex: zIndexes.modal,
+ } : {};
+ }, [isStacked, zIndexes.modal]);
+
+ return {
+ shouldRenderBackdrop,
+ modalStyle,
+ parentModalRef,
+ };
+}
+
+export default useStackedModal;