diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx index d0d24768..17eb8bdc 100644 --- a/src/components/Popover/Popover.jsx +++ b/src/components/Popover/Popover.jsx @@ -13,6 +13,9 @@ export const Popover = React.forwardRef((props, ref) => { placement, children, portalId, + position, + x, + y, ...restProps } = props; @@ -26,6 +29,11 @@ export const Popover = React.forwardRef((props, ref) => { getRootAlignmentClassName(placement, styles), )} ref={ref} + style={{ + left: x, + position, + top: y, + }} > {children} @@ -42,6 +50,9 @@ export const Popover = React.forwardRef((props, ref) => { Popover.defaultProps = { placement: 'bottom', portalId: null, + position: null, + x: null, + y: null, }; Popover.propTypes = { @@ -71,6 +82,18 @@ Popover.propTypes = { * If set, popover is rendered in the React Portal with that ID. */ portalId: PropTypes.string, + /** + * This sets the CSS property `position` of the popover. This is reserved for use with Floating UI. + */ + position: PropTypes.string, + /** + * This sets the CSS property `top` of the popover. This is reserved for use with Floating UI. + */ + x: PropTypes.string, + /** + * This sets the CSS property `left` of the popover. This is reserved for use with Floating UI. + */ + y: PropTypes.string, }; export const PopoverWithGlobalProps = withGlobalProps(Popover, 'Popover'); diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md index dac06ce8..a2e2be4d 100644 --- a/src/components/Popover/README.md +++ b/src/components/Popover/README.md @@ -267,11 +267,9 @@ React.createElement(() => { Auto-flipping Popover