feat(@clayui/popover): add observeRect to align the popover on the scroll

Nothing much different from what was done for `DropDown.Menu`, we just call the alignment method with each change in the `trigger`.

Author: matuzalemsteles

packages/clay-popover/src/index.tsx

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayPortal} from '@clayui/shared';
+import {ClayPortal, observeRect} from '@clayui/shared';
 import classNames from 'classnames';
 import domAlign from 'dom-align';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 export const ALIGN_POSITIONS = [
 	'top',
@@ -100,12 +100,9 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 		const show = externalShow ? externalShow : internalShow;
 		const setShow = onShowChange ? onShowChange : internalSetShow;
 
-		useEffect(() => {
+		const align = useCallback(() => {
 			if (
-				trigger &&
-				ref &&
 				(ref as React.RefObject<HTMLElement>).current &&
-				triggerRef &&
 				triggerRef.current
 			) {
 				const points = ALIGNMENTS_MAP[alignPosition] as [
@@ -121,7 +118,19 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 					}
 				);
 			}
-		}, [show]);
+		}, [alignPosition, triggerRef, ref]);
+
+		useEffect(() => {
+			if (trigger) {
+				align();
+			}
+		}, [align, show]);
+
+		useEffect(() => {
+			if (trigger && triggerRef.current) {
+				return observeRect(triggerRef.current, align);
+			}
+		}, [align]);
 
 		useEffect(() => {
 			if (!disableScroll && popoverScrollerRef.current && show) {

packages/clay-popover/stories/index.tsx

@@ -6,6 +6,7 @@
 import '@clayui/css/lib/css/atlas.css';
 import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
+import ClayModal, {useModal} from '@clayui/modal';
 import {boolean, select} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
 import React from 'react';
@@ -102,4 +103,81 @@ storiesOf('Components|ClayPopover', module)
 				</ClayPopover>
 			</>
 		);
+	})
+	.add('popover w/ recalculate position', () => {
+		const [visible, setVisible] = React.useState(false);
+		const {observer, onClose} = useModal({
+			onClose: () => setVisible(false),
+		});
+
+		return (
+			<>
+				{visible && (
+					<ClayModal
+						observer={observer}
+						size="lg"
+						spritemap={spritemap}
+						status="info"
+					>
+						<ClayModal.Header>{'Title'}</ClayModal.Header>
+						<ClayModal.Body scrollable>
+							<ClayPopover
+								header="Popover"
+								trigger={
+									<ClayButtonWithIcon
+										aria-label="Information button"
+										displayType="secondary"
+										spritemap={spritemap}
+										symbol="info-circle-open"
+									/>
+								}
+							>
+								{`Viennese flavour cup eu, percolator froth ristretto mazagran
+							caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+							spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+							caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+							spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+							caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+							spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+							caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+							spoon acerbic to go macchiato strong.`}
+							</ClayPopover>
+							<br />
+							<img
+								alt="cat"
+								src="https://cataas.com/cat/says/it will have"
+							/>
+							<img
+								alt="cat"
+								src="https://cataas.com/cat/says/a scroll"
+							/>
+						</ClayModal.Body>
+						<ClayModal.Footer
+							first={
+								<ClayButton.Group spaced>
+									<ClayButton displayType="secondary">
+										{'Secondary'}
+									</ClayButton>
+									<ClayButton displayType="secondary">
+										{'Secondary'}
+									</ClayButton>
+								</ClayButton.Group>
+							}
+							last={
+								<ClayButton onClick={onClose}>
+									{'Primary'}
+								</ClayButton>
+							}
+						/>
+					</ClayModal>
+				)}
+
+				<ClayButton
+					displayType="primary"
+					onClick={() => setVisible(true)}
+				>
+					{'Open modal'}
+				</ClayButton>
+			</>
+		);
 	});