From f4c56055558743811d7bf33da5a0ae362b974ca0 Mon Sep 17 00:00:00 2001
From: KitoC <35714838+KitoC@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:05:39 +1000
Subject: [PATCH] TPP 849 fix modal and popover z index issues (#311)

---
 lib/components/ActionsMenu/index.js | 13 +++++++++++--
 lib/components/Modal/index.js       |  7 ++++++-
 lib/components/Popover/index.js     | 14 ++++++++++++--
 lib/utils/floatingUiHelpers.js      | 27 +++++++++++++++++++++++++++
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 6 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 lib/utils/floatingUiHelpers.js

diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
index 82591534..a71ebb0b 100644
--- a/lib/components/ActionsMenu/index.js
+++ b/lib/components/ActionsMenu/index.js
@@ -18,6 +18,10 @@ import {
   FloatingPortal,
   useMergeRefs
 } from "@floating-ui/react";
+import {
+  getFloatingUiRootElement,
+  getFloatingUiZIndex
+} from "../../utils/floatingUiHelpers";
 
 const ActionMenuContext = createContext({});
 
@@ -314,14 +318,19 @@ export const ActionsMenuBody = ({
         {triggerComponent}
 
         {actionMenu.context.open && (
-          <FloatingPortal>
+          <FloatingPortal
+            root={getFloatingUiRootElement(actionMenu.refs.reference)}
+          >
             <FloatingFocusManager
               context={actionMenu.context}
               modal={actionMenu.modal}
             >
               <div
                 ref={ref}
-                style={{ ...actionMenu.floatingStyles, zIndex: 1100 }}
+                style={{
+                  ...actionMenu.floatingStyles,
+                  zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
+                }}
                 aria-labelledby={actionMenu.labelId}
                 {...actionMenu.getFloatingProps(props)}
                 className="actionMenu-content"
diff --git a/lib/components/Modal/index.js b/lib/components/Modal/index.js
index ced6d097..073cc94c 100644
--- a/lib/components/Modal/index.js
+++ b/lib/components/Modal/index.js
@@ -237,7 +237,12 @@ const Modal = ({
     >
       {visible && (
         <FocusTrap focusTrapOptions={{ onDeactivate: onClose }}>
-          <div role="dialog" aria-modal="true" aria-label={ariaLabel}>
+          <div
+            id="modal"
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+          >
             <Container
               width={width}
               height={height}
diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
index 0f00a604..a8c8c0bf 100644
--- a/lib/components/Popover/index.js
+++ b/lib/components/Popover/index.js
@@ -19,6 +19,10 @@ import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
 import Box from "../Box";
+import {
+  getFloatingUiRootElement,
+  getFloatingUiZIndex
+} from "../../utils/floatingUiHelpers";
 
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -330,12 +334,18 @@ export default function Popover({
     <Box {...props}>
       {triggerComponent}
 
-      <FloatingPortal preserveTabOrder={true}>
+      <FloatingPortal
+        root={getFloatingUiRootElement(context.refs.reference)}
+        preserveTabOrder={true}
+      >
         {text && (
           <StyledPopoverContainer
             className={`Tooltip popover ${visible ? "visible" : ""}`}
             ref={refs.setFloating}
-            style={{ ...floatingStyles, zIndex: 1100 }}
+            style={{
+              ...floatingStyles,
+              zIndex: getFloatingUiZIndex(context.refs.reference)
+            }}
             {...getFloatingProps()}
           >
             <FloatingFocusManager
diff --git a/lib/utils/floatingUiHelpers.js b/lib/utils/floatingUiHelpers.js
new file mode 100644
index 00000000..5cb053b0
--- /dev/null
+++ b/lib/utils/floatingUiHelpers.js
@@ -0,0 +1,27 @@
+const getFloatingUiZIndex = (triggerRef) => {
+  const activeModalRef = document.getElementById("modal-overlay");
+
+  if (
+    activeModalRef &&
+    triggerRef.current &&
+    activeModalRef?.contains?.(triggerRef.current)
+  ) {
+    return 1100;
+  }
+
+  return 900;
+};
+
+const getFloatingUiRootElement = (triggerRef) => {
+  const activeModalRef = document.getElementById("modal-overlay");
+
+  const isRenderedInModal = activeModalRef?.contains?.(triggerRef.current);
+
+  if (isRenderedInModal) {
+    return document.getElementById("modal");
+  }
+
+  return undefined;
+};
+
+export { getFloatingUiZIndex, getFloatingUiRootElement };
diff --git a/package-lock.json b/package-lock.json
index eb2ac27f..6bce4ae6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.16",
+  "version": "3.2.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orcs-design-system",
-      "version": "3.2.16",
+      "version": "3.2.17",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
diff --git a/package.json b/package.json
index 021ad81e..81782362 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.16",
+  "version": "3.2.17",
   "engines": {
     "node": "20.12.2"
   },