Made action menu always present in DOM

orchestrated-io · Aug 6, 2024 · e18a99e · e18a99e
1 parent 984c98e
commit e18a99e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
@@ -63,6 +63,18 @@ const crossTransform2 = keyframes`
     }
   `;
 
+const StyledActionsMenuContainer = styled.div`
+  pointer-events: none;
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+  transition-delay: 200ms;
+
+  &.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+
 const Wrapper = styled.div`
   ${space}
   ${layout}
@@ -319,31 +331,31 @@ export const ActionsMenuBody = ({
       <Wrapper {...props}>
         {triggerComponent}
 
-        {actionMenu.context.open && (
-          <FloatingPortal
-            root={getFloatingUiRootElement(actionMenu.refs.reference)}
+        <FloatingPortal
+          root={getFloatingUiRootElement(actionMenu.refs.reference)}
+        >
+          <FloatingFocusManager
+            context={actionMenu.context}
+            modal={actionMenu.modal}
           >
-            <FloatingFocusManager
-              context={actionMenu.context}
-              modal={actionMenu.modal}
+            <StyledActionsMenuContainer
+              ref={ref}
+              style={{
+                ...actionMenu.floatingStyles,
+                zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
+              }}
+              aria-labelledby={actionMenu.labelId}
+              {...actionMenu.getFloatingProps(props)}
+              className={`actionMenu-content ${
+                actionMenu.context.open ? "visible" : ""
+              }`}
             >
-              <div
-                ref={ref}
-                style={{
-                  ...actionMenu.floatingStyles,
-                  zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
-                }}
-                aria-labelledby={actionMenu.labelId}
-                {...actionMenu.getFloatingProps(props)}
-                className="actionMenu-content"
-              >
-                <Menu menuWidth={menuWidth} isOpen={toggleState} role="list">
-                  {children}
-                </Menu>
-              </div>
-            </FloatingFocusManager>
-          </FloatingPortal>
-        )}
+              <Menu menuWidth={menuWidth} isOpen={toggleState} role="list">
+                {children}
+              </Menu>
+            </StyledActionsMenuContainer>
+          </FloatingFocusManager>
+        </FloatingPortal>
       </Wrapper>
     </ActionMenuContext.Provider>
   );

diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
@@ -304,16 +304,20 @@ export default function Popover({
 
   const triggerProps = {
     ...getReferenceProps({
-      ref: refs.setReference,
-      "data-testid": dataTestId
+      ref: refs.setReference
     })
   };
 
   let triggerComponent = null;
 
   if (variant === "tooltip") {
     triggerComponent = (
-      <TooltipControl {...triggerProps} active={visible} tabIndex="0">
+      <TooltipControl
+        data-testid={dataTestId}
+        {...triggerProps}
+        active={visible}
+        tabIndex="0"
+      >
         <Icon
           transform="grow-4"
           icon={["fas", "question-circle"]}