From d4923d5b3538652459089b0c76f14b08ae5ad306 Mon Sep 17 00:00:00 2001
From: guiiBecker <guilhermegbecker@gmail.com>
Date: Tue, 19 May 2026 11:55:08 -0300
Subject: [PATCH] feat(BBBModal): add priority prop to BBBModal for z-index
 stacking control

---
 src/components/Modal/component.tsx | 15 ++++++++++++++-
 src/components/Modal/constants.ts  | 11 +++++++++++
 src/components/Modal/index.ts      |  2 ++
 src/components/Modal/types.ts      | 13 +++++++++++++
 src/components/index.ts            |  3 ++-
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Modal/constants.ts

diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index 7026451..2bc5b00 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -5,6 +5,7 @@ import { BBBTypography } from '../Typography';
 import { MdClose } from 'react-icons/md';
 import { BBBDivider } from '../Divider';
 import { ModalProps } from './types';
+import { MODAL_PRIORITY_Z_INDEX } from './constants';
 import { BBButton } from '../..';
 
 /**
@@ -13,6 +14,8 @@ import { BBButton } from '../..';
  * This component provides a customizable modal with optional title, body, and footer.
  * It supports accessibility, dividers, scrollable body, and sticky footer.
  *
+ * Use the `priority` prop to control z-index stacking when multiple modals
+ * coexist: `'low'` (1001), `'medium'` (1002), `'high'` (1003).
  */
 const Modal: React.FC<ModalProps> = ({
   isOpen = true,
@@ -28,14 +31,24 @@ const Modal: React.FC<ModalProps> = ({
   footerContent = null,
   stickyFooter = true,
   children,
+  priority,
+  ...rest
 }) => {
+  const overlayStyle = priority
+    ? { ...Styled.modalStyles.overlay, zIndex: MODAL_PRIORITY_Z_INDEX[priority] }
+    : Styled.modalStyles.overlay;
+
+  const modalStyles = {
+    overlay: overlayStyle,
+    content: Styled.modalStyles.content,
+  };
 
   return (
     <ReactModal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       contentLabel={contentLabel}
-      style={Styled.modalStyles}
+      style={modalStyles}
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       shouldCloseOnEsc={shouldCloseOnEsc}
       appElement={appElement}
diff --git a/src/components/Modal/constants.ts b/src/components/Modal/constants.ts
new file mode 100644
index 0000000..8a76e90
--- /dev/null
+++ b/src/components/Modal/constants.ts
@@ -0,0 +1,11 @@
+export const MODAL_PRIORITIES = {
+  LOW: 'low',
+  MEDIUM: 'medium',
+  HIGH: 'high',
+} as const;
+export const MODAL_PRIORITY_VALUES = Object.values(MODAL_PRIORITIES);
+export const MODAL_PRIORITY_Z_INDEX: Record<typeof MODAL_PRIORITY_VALUES[number], number> = {
+  low: 1001,
+  medium: 1002,
+  high: 1003,
+};
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 3c68dcc..8351c93 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1 +1,3 @@
 export { default as BBBModal } from './component';
+export type { ModalPriority } from './types';
+export { MODAL_PRIORITIES, MODAL_PRIORITY_VALUES, MODAL_PRIORITY_Z_INDEX } from './constants';
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index 6022565..21886c1 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -1,4 +1,8 @@
 import React from 'react';
+import { MODAL_PRIORITY_VALUES } from './constants';
+
+export type ModalPriority = typeof MODAL_PRIORITY_VALUES[number];
+
 
 export interface StyledModalBodyProps {
   $allowScroll: boolean;
@@ -22,4 +26,13 @@ export interface ModalProps {
   stickyFooter?: boolean;
   footerContent?: React.ReactNode;
   children: React.ReactNode;
+  /**
+   * Controls z-index when multiple modals coexist.
+   * - `low`    → z-index 1001
+   * - `medium` → z-index 1002
+   * - `high`   → z-index 1003
+   *
+   * When omitted the default overlay z-index (100) is used.
+   */
+  priority?: ModalPriority;
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 722424e..c779d23 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,7 +3,8 @@ export { BBButton } from './Button';
 export { BBBCheckbox } from './Checkbox';
 export { BBBDivider } from './Divider';
 export { BBBHint } from './Hint';
-export { BBBModal } from './Modal';
+export { BBBModal, MODAL_PRIORITY_Z_INDEX } from './Modal';
+export type { ModalPriority } from './Modal';
 export { BBBNavigation } from './Navigation';
 export { BBBSelect } from './Select';
 export { BBBSpinner } from './Spinner';