TPP 849 fix modal and popover z index issues (#311)

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"

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}

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

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 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.16",
+  "version": "3.2.17",
   "engines": {
     "node": "20.12.2"
   },