TPP-849 fixed click/focus issues

lib/components/ActionsMenu/index.js

@@ -321,7 +321,7 @@ export const ActionsMenuBody = ({
             >
               <div
                 ref={ref}
-                style={{ ...actionMenu.floatingStyles }}
+                style={{ ...actionMenu.floatingStyles, zIndex: 21 }}
                 aria-labelledby={actionMenu.labelId}
                 {...actionMenu.getFloatingProps(props)}
                 className="actionMenu-content"

lib/components/Popover/Popover.stories.js

@@ -20,7 +20,7 @@ export default {
 
 export const defaultPopover = () => (
   <Popover text="Description that explains child element">
-    <Button>Hover Me!</Button>
+    <Button onClick={() => alert("Maintains original click")}>Hover Me!</Button>
   </Popover>
 );
 defaultPopover.storyName = "Default";

lib/components/Popover/index.js

@@ -11,8 +11,7 @@ import {
   useRole,
   useInteractions,
   FloatingPortal,
-  safePolygon,
-  useClick
+  safePolygon
 } from "@floating-ui/react";
 import themeGet from "@styled-system/theme-get";
 import styled from "styled-components";
@@ -36,7 +35,7 @@ const StyledPopoverContainer = styled.div`
   transition: all 300ms ease-in-out;
   transition-delay: 300ms;
 
-  &.isOpen {
+  &.visible {
     opacity: 1;
     pointer-events: auto;
   }
@@ -268,6 +267,7 @@ export default function Popover({
   ...props
 }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -286,37 +286,37 @@ export default function Popover({
 
   const hover = useHover(context, { move: false, handleClose: safePolygon() });
   const focus = useFocus(context);
-  const click = useClick(context, {
-    enabled: true
-  });
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: "tooltip" });
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     hover,
     focus,
     dismiss,
-    role,
-    click
+    role
   ]);
 
   const triggerProps = {
-    ...getReferenceProps({ ref: refs.setReference })
+    ...getReferenceProps({
+      ref: refs.setReference,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    })
   };
 
   let triggerComponent = null;
 
   if (variant === "tooltip") {
     triggerComponent = (
-      <TooltipControl {...triggerProps} active={isOpen}>
+      <TooltipControl {...triggerProps} active={isOpen} tabIndex="0">
         <Icon
           transform="grow-4"
           icon={["fas", "question-circle"]}
           fontSize="2"
         />
       </TooltipControl>
     );
-  } else if (children.type.$$typeof === Symbol.for("react.forward_ref")) {
+  } else if (children?.type?.$$typeof === Symbol.for("react.forward_ref")) {
     triggerComponent = cloneElement(children, triggerProps);
   } else {
     triggerComponent = <div {...triggerProps}>{children}</div>;
@@ -327,20 +327,19 @@ export default function Popover({
       ? direction
       : context.placement;
 
+  const isVisible = isOpen || isFocused;
+
   return (
     <div {...props}>
       {triggerComponent}
 
       <FloatingPortal>
         {text && (
           <StyledPopoverContainer
-            className={`Tooltip ${isOpen ? "isOpen" : ""}`}
+            className={`Tooltip popover ${isVisible ? "visible" : ""}`}
             ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps({
-              onMouseEnter: () => setIsOpen(true),
-              onMouseLeave: () => setIsOpen(false)
-            })}
+            style={{ ...floatingStyles, zIndex: 21 }}
+            {...getFloatingProps()}
           >
             <StyledPopover
               className={`${directionClass}`}

package.json

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