diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
index 0d6a51c6..7227f5dc 100644
--- a/lib/components/ActionsMenu/index.js
+++ b/lib/components/ActionsMenu/index.js
@@ -321,7 +321,7 @@ export const ActionsMenuBody = ({
>
(
-
+
);
defaultPopover.storyName = "Default";
diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
index 82d0e092..90ffc60a 100644
--- a/lib/components/Popover/index.js
+++ b/lib/components/Popover/index.js
@@ -12,12 +12,13 @@ import {
useInteractions,
FloatingPortal,
safePolygon,
- useClick
+ FloatingFocusManager
} from "@floating-ui/react";
import themeGet from "@styled-system/theme-get";
import styled from "styled-components";
import Icon from "../Icon";
import { PropTypes } from "prop-types";
+import Box from "../Box";
const DIRECTIONS_MAP = {
topLeft: "top-start",
@@ -36,7 +37,7 @@ const StyledPopoverContainer = styled.div`
transition: all 300ms ease-in-out;
transition-delay: 300ms;
- &.isOpen {
+ &.visible {
opacity: 1;
pointer-events: auto;
}
@@ -267,11 +268,11 @@ export default function Popover({
ariaLabel,
...props
}) {
- const [isOpen, setIsOpen] = useState(false);
+ const [visible, setVisible] = useState(false);
const { refs, floatingStyles, context } = useFloating({
- open: isOpen,
- onOpenChange: setIsOpen,
+ open: visible,
+ onOpenChange: setVisible,
placement: DIRECTIONS_MAP[direction] || direction || "right",
whileElementsMounted: autoUpdate,
middleware: [
@@ -286,9 +287,6 @@ 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" });
@@ -296,19 +294,20 @@ export default function Popover({
hover,
focus,
dismiss,
- role,
- click
+ role
]);
const triggerProps = {
- ...getReferenceProps({ ref: refs.setReference })
+ ...getReferenceProps({
+ ref: refs.setReference
+ })
};
let triggerComponent = null;
if (variant === "tooltip") {
triggerComponent = (
-
+
);
- } 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 = {children}
;
@@ -328,34 +327,37 @@ export default function Popover({
: context.placement;
return (
-
+
{triggerComponent}
-
+
{text && (
setIsOpen(true),
- onMouseLeave: () => setIsOpen(false)
- })}
+ style={{ ...floatingStyles, zIndex: 21 }}
+ {...getFloatingProps()}
>
-
- {text}
-
+
+ {text}
+
+
)}
-
+
);
}
diff --git a/package-lock.json b/package-lock.json
index 1c9d6edf..e81ef576 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "orcs-design-system",
- "version": "3.2.12",
+ "version": "3.2.13",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "orcs-design-system",
- "version": "3.2.12",
+ "version": "3.2.13",
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
diff --git a/package.json b/package.json
index 0dfac53f..f5b0fa26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "orcs-design-system",
- "version": "3.2.12",
+ "version": "3.2.13",
"engines": {
"node": "20.12.2"
},