TPP-849 fix data testid for Popover (#313)

orchestrated-io · Aug 6, 2024 · 92aeab6 · 92aeab6
1 parent 29e014b
commit 92aeab6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 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 300ms;
+  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
+
+  &.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+
 const Wrapper = styled.div`
   ${space}
   ${layout}
@@ -135,10 +147,6 @@ const Menu = styled.div`
   z-index: 5;
   background-color: ${(props) => themeGet("colors.greyDarker")(props)};
   border-radius: ${(props) => themeGet("radii.2")(props)};
-
-  transition: all 300ms;
-  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
-  pointer-events: auto;
 `;
 
 export const ActionsMenuHeading = styled((props) => {
@@ -148,9 +156,9 @@ export const ActionsMenuHeading = styled((props) => {
   // // Only sets `aria-labelledby` on the Popover root element
   // // if this component is mounted inside it.
   useLayoutEffect(() => {
-    actionMenu.setLabelId(id);
+    actionMenu?.setLabelId?.(id);
 
-    return () => actionMenu.setLabelId(undefined);
+    return () => actionMenu?.setLabelId?.(undefined);
   }, [id, actionMenu]);
 
   return (
@@ -319,31 +327,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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.18",
+  "version": "3.2.19",
   "engines": {
     "node": "20.12.2"
   },