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" },