orcs-design-system 3.2.16 → 3.2.18

package/es/components/ActionsMenu/index.js

@@ -6,6 +6,7 @@ import { themeGet } from "@styled-system/theme-get";
 import { commonKeys } from "../../hooks/keypress";
 import useActionMenu from "./useActionMenu";
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
 const crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
@@ -102,6 +103,7 @@ export const ActionsMenuBody = _ref => {
     onTriggerFocus,
     closeMenu,
     closeOnClick = false,
+    "data-testid": dataTestId,
     ...props
   } = _ref;
   const id = useId();
@@ -127,7 +129,8 @@ export const ActionsMenuBody = _ref => {
       ref: triggerRef,
       ...props,
       ...children.props,
-      "data-state": actionMenu.open ? "open" : "closed"
+      "data-state": actionMenu.open ? "open" : "closed",
+      "data-testid": dataTestId
     })
   };
   let triggerComponent = /*#__PURE__*/_jsx(Control, {
@@ -153,6 +156,7 @@ export const ActionsMenuBody = _ref => {
     children: /*#__PURE__*/_jsxs(Wrapper, {
       ...props,
       children: [triggerComponent, actionMenu.context.open && /*#__PURE__*/_jsx(FloatingPortal, {
+        root: getFloatingUiRootElement(actionMenu.refs.reference),
         children: /*#__PURE__*/_jsx(FloatingFocusManager, {
           context: actionMenu.context,
           modal: actionMenu.modal,
@@ -160,7 +164,7 @@ export const ActionsMenuBody = _ref => {
             ref: ref,
             style: {
               ...actionMenu.floatingStyles,
-              zIndex: 1100
+              zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
             },
             "aria-labelledby": actionMenu.labelId,
             ...actionMenu.getFloatingProps(props),

package/es/components/Modal/index.js

@@ -134,6 +134,7 @@ const Modal = _ref => {
         onDeactivate: onClose
       },
       children: /*#__PURE__*/_jsx("div", {
+        id: "modal",
         role: "dialog",
         "aria-modal": "true",
         "aria-label": ariaLabel,

package/es/components/Popover/index.js

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
 import Box from "../Box";
+import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -105,13 +106,14 @@ export default function Popover(_ref) {
   return /*#__PURE__*/_jsxs(Box, {
     ...props,
     children: [triggerComponent, /*#__PURE__*/_jsx(FloatingPortal, {
+      root: getFloatingUiRootElement(context.refs.reference),
       preserveTabOrder: true,
       children: text && /*#__PURE__*/_jsx(StyledPopoverContainer, {
         className: "Tooltip popover ".concat(visible ? "visible" : ""),
         ref: refs.setFloating,
         style: {
           ...floatingStyles,
-          zIndex: 1100
+          zIndex: getFloatingUiZIndex(context.refs.reference)
         },
         ...getFloatingProps(),
         children: /*#__PURE__*/_jsx(FloatingFocusManager, {

package/es/utils/floatingUiHelpers.js

@@ -0,0 +1,18 @@
+const getFloatingUiZIndex = triggerRef => {
+  var _activeModalRef$conta;
+  const activeModalRef = document.getElementById("modal-overlay");
+  if (activeModalRef && triggerRef.current && activeModalRef !== null && activeModalRef !== void 0 && (_activeModalRef$conta = activeModalRef.contains) !== null && _activeModalRef$conta !== void 0 && _activeModalRef$conta.call(activeModalRef, triggerRef.current)) {
+    return 1100;
+  }
+  return 900;
+};
+const getFloatingUiRootElement = triggerRef => {
+  var _activeModalRef$conta2;
+  const activeModalRef = document.getElementById("modal-overlay");
+  const isRenderedInModal = activeModalRef === null || activeModalRef === void 0 || (_activeModalRef$conta2 = activeModalRef.contains) === null || _activeModalRef$conta2 === void 0 ? void 0 : _activeModalRef$conta2.call(activeModalRef, triggerRef.current);
+  if (isRenderedInModal) {
+    return document.getElementById("modal");
+  }
+  return undefined;
+};
+export { getFloatingUiZIndex, getFloatingUiRootElement };

package/package.json

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