@lumx/react 3.10.1-alpha.8 → 3.11.1-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.8",
-        "@lumx/icons": "^3.10.1-alpha.8",
+        "@lumx/core": "^3.11.1-alpha.0",
+        "@lumx/icons": "^3.11.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.10.1-alpha.8"
+    "version": "3.11.1-alpha.0"
 }

package/src/components/popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 
 import { mdiAccount, mdiBell } from '@lumx/icons';
 import {
@@ -14,6 +14,8 @@ import {
     Popover,
     Size,
     Elevation,
+    Message,
+    FlexBox, FlexBoxProps, IconButtonProps,
 } from '@lumx/react';
 import range from 'lodash/range';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
@@ -110,52 +112,66 @@ export const Placements = {
     ],
 };
 
-export const WithUpdatingChildren = () => {
-    const anchorRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
+export const TestUpdatingChildrenAndMovingAnchor = {
+    render() {
+        const anchorRef = useRef(null);
+        const [isOpen, setIsOpen] = useState(false);
 
-    const toggleOpen = () => setIsOpen(!isOpen);
+        const toggleOpen = () => setIsOpen(!isOpen);
 
-    const [text, setText] = useState('Long loading text with useless words');
-    useEffect(() => {
-        if (isOpen) {
-            const timer = setTimeout(() => {
-                setText('Text');
-            }, 1000);
-            return () => clearTimeout(timer);
-        }
-        setText('Long loading text with useless words');
-        return undefined;
-    }, [isOpen]);
+        const [text, setText] = useState('Long loading text with useless words');
+        const [anchorSize, setAnchorSize] = useState<IconButtonProps['size']>('m');
+        const [anchorPosition, setAnchorPosition] = useState<FlexBoxProps['vAlign']>('center');
+        useEffect(() => {
+            if (isOpen) {
+                const timers = [
+                    setTimeout(() => setText('Text'), 1000),
+                    setTimeout(() => setAnchorSize('s'), 1500),
+                    setTimeout(() => setAnchorPosition('left'), 2000),
+                ];
+                return () => timers.forEach(clearTimeout);
+            }
+            setText('Long loading text with useless words');
+            setAnchorSize('m');
+            setAnchorPosition('center');
+            return undefined;
+        }, [isOpen]);
 
-    return (
-        <div style={{ float: 'right' }} className="lumx-spacing-margin-right-huge">
-            <IconButton
-                label="Notifications"
-                className="lumx-spacing-margin-right-huge"
-                ref={anchorRef}
-                emphasis={Emphasis.low}
-                icon={mdiBell}
-                size={Size.m}
-                onClick={toggleOpen}
-            />
-            <Popover
-                closeOnClickAway
-                closeOnEscape
-                isOpen={isOpen}
-                anchorRef={anchorRef}
-                placement={Placement.BOTTOM_END}
-                onClose={toggleOpen}
-                fitWithinViewportHeight
-            >
-                <List>
-                    <ListItem before={<Icon icon={mdiAccount} />} className="lumx-spacing-margin-right-huge">
-                        <span>{text}</span>
-                    </ListItem>
-                </List>
-            </Popover>
-        </div>
-    );
+        return (
+            <FlexBox orientation="vertical" gap="huge">
+                <Message kind="info">
+                    Test popover text resize (after 1sec), anchor resize (after 1.5sec) and anchor move (after 2sec)
+                </Message>
+                <FlexBox orientation="horizontal" vAlign={anchorPosition}>
+                    <IconButton
+                        label="Notifications"
+                        className="lumx-spacing-margin-right-huge"
+                        ref={anchorRef}
+                        emphasis={Emphasis.low}
+                        icon={mdiBell}
+                        size={anchorSize}
+                        onClick={toggleOpen}
+                    />
+                    <Popover
+                        closeOnClickAway
+                        closeOnEscape
+                        isOpen={isOpen}
+                        anchorRef={anchorRef}
+                        placement={Placement.BOTTOM_END}
+                        onClose={toggleOpen}
+                        fitWithinViewportHeight
+                    >
+                        <List>
+                            <ListItem before={<Icon icon={mdiAccount} />} className="lumx-spacing-margin-right-huge">
+                                <span>{text}</span>
+                            </ListItem>
+                        </List>
+                    </Popover>
+                </FlexBox>
+            </FlexBox>
+        );
+    },
+    parameters: { chromatic: { disable: true } },
 };
 
 export const WithScrollingPopover = () => {

package/src/components/popover/Popover.tsx

@@ -137,7 +137,6 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
             fitWithinViewportHeight,
             boundaryRef,
             anchorRef,
-            children,
             placement,
             style,
             zIndex,
@@ -155,7 +154,7 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
     const clickAwayRefs = useRef([popoverRef, anchorRef]);
     const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);
 
-    return isOpen
+    return isOpen && styles.popover
         ? renderPopover(
               <Component
                   {...forwardedProps}

package/src/components/popover/PositionObserver.ts

@@ -0,0 +1,155 @@
+import { DOCUMENT, WINDOW } from '@lumx/react/constants';
+
+export type PositionObserverCallback = (entries: PositionObserverEntry[], observer: PositionObserver) => void;
+
+export type PositionObserverEntry = {
+    target: Element;
+    boundingClientRect: DOMRect;
+    clientHeight: number;
+    clientWidth: number;
+};
+
+const errorString = 'PositionObserver Error';
+
+const ROOT = DOCUMENT?.documentElement;
+
+/**
+ * The PositionObserver class is a utility class that observes the position
+ * of DOM elements and triggers a callback when their position changes.
+ */
+export default class PositionObserver {
+    public entries: Map<Element, PositionObserverEntry>;
+
+    _tick: number;
+
+    _callback: PositionObserverCallback;
+
+    /**
+     * The constructor takes two arguments, a `callback`, which is called
+     * whenever the position of an observed element changes and an `options` object.
+     * The callback function should take an array of `PositionObserverEntry` objects
+     * as its only argument, but it's not required.
+     *
+     * @param callback the callback that applies to all targets of this observer
+     */
+    constructor(callback: PositionObserverCallback) {
+        this.entries = new Map();
+        this._callback = callback;
+        this._tick = 0;
+    }
+
+    /**
+     * Start observing the position of the specified element.
+     * If the element is not currently attached to the DOM,
+     * it will NOT be added to the entries.
+     *
+     * @param target an `Element` target
+     */
+    public observe = (target: Element) => {
+        if (!(target instanceof Element)) {
+            throw new Error(`${errorString}: ${target} is not an instance of Element.`);
+        }
+
+        if (!ROOT?.contains(target)) return;
+
+        this._new(target).then(({ boundingClientRect }) => {
+            if (ROOT && boundingClientRect && !this.entries.has(target)) {
+                const { clientWidth, clientHeight } = ROOT;
+
+                this.entries.set(target, {
+                    target,
+                    boundingClientRect,
+                    clientWidth,
+                    clientHeight,
+                });
+            }
+
+            if (!this._tick) this._tick = requestAnimationFrame(this._runCallback);
+        });
+    };
+
+    /**
+     * Private method responsible for all the heavy duty,
+     * the observer's runtime.
+     */
+    private _runCallback = () => {
+        /* istanbul ignore if @preserve - a guard must be set */
+        if (!ROOT || !this.entries.size) return;
+        const { clientWidth, clientHeight } = ROOT;
+
+        const queue = new Promise<PositionObserverEntry[]>((resolve) => {
+            const updates: PositionObserverEntry[] = [];
+            this.entries.forEach(
+                ({ target, boundingClientRect: oldBoundingBox, clientWidth: oldWidth, clientHeight: oldHeight }) => {
+                    /* istanbul ignore if @preserve - a guard must be set when target has been removed */
+                    if (!ROOT.contains(target)) return;
+
+                    this._new(target).then(({ boundingClientRect, isIntersecting }) => {
+                        /* istanbul ignore if @preserve - make sure to only count visible entries */
+                        if (!isIntersecting) return;
+                        const { left, top } = boundingClientRect;
+
+                        /* istanbul ignore else @preserve - only schedule entries that changed position */
+                        if (
+                            oldBoundingBox.top !== top ||
+                            oldBoundingBox.left !== left ||
+                            oldWidth !== clientWidth ||
+                            oldHeight !== clientHeight
+                        ) {
+                            const newEntry = {
+                                target,
+                                boundingClientRect,
+                                clientHeight,
+                                clientWidth,
+                            };
+                            this.entries.set(target, newEntry);
+                            updates.push(newEntry);
+                        }
+                    });
+                },
+            );
+
+            resolve(updates);
+        });
+
+        this._tick = requestAnimationFrame(async () => {
+            // execute the queue
+            const updates = await queue;
+
+            // only execute the callback if position actually changed
+            /* istanbul ignore else @preserve */
+            if (updates.length) this._callback(updates, this);
+
+            this._runCallback();
+        });
+    };
+
+    /**
+     * Check intersection status and resolve it
+     * right away.
+     *
+     * @param target an `Element` target
+     */
+    private _new = (target: Element) => {
+        return new Promise<IntersectionObserverEntry>((resolve) => {
+            if (!WINDOW?.IntersectionObserver) return;
+
+            const intersectionObserver = new IntersectionObserver(([entry], ob) => {
+                ob.disconnect();
+
+                resolve(entry);
+            });
+
+            intersectionObserver.observe(target);
+        });
+    };
+
+    /**
+     * Immediately stop observing all elements.
+     */
+    public disconnect = () => {
+        cancelAnimationFrame(this._tick);
+        this.entries.clear();
+        this._tick = 0;
+    };
+}

package/src/components/popover/usePopoverStyle.tsx

@@ -6,6 +6,7 @@ import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
 import { usePopper } from '@lumx/react/hooks/usePopper';
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
+import PositionObserver from './PositionObserver';
 
 /**
  * Popper js modifier to fit popover min width to the anchor width.
@@ -74,7 +75,6 @@ type Options = Pick<
     | 'fitWithinViewportHeight'
     | 'boundaryRef'
     | 'anchorRef'
-    | 'children'
     | 'placement'
     | 'style'
     | 'zIndex'
@@ -97,13 +97,11 @@ export function usePopoverStyle({
     fitWithinViewportHeight,
     boundaryRef,
     anchorRef,
-    children,
     placement,
     style,
     zIndex,
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
 
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
@@ -137,9 +135,37 @@ export function usePopoverStyle({
     }
 
     const { styles, attributes, state, update } = usePopper(anchorRef.current, popperElement, { placement, modifiers });
+
+    // Auto update popover
     useEffect(() => {
-        update?.();
-    }, [children, update]);
+        const { current: anchorElement } = anchorRef;
+        if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
+            return undefined;
+        }
+
+        // Only update once per frame
+        let frame: number | undefined;
+        function limitedUpdate() {
+            if (frame) return;
+            frame = requestAnimationFrame(() => {
+                update?.();
+                frame = undefined;
+            });
+        }
+
+        // On anchor move
+        const positionObserver = new PositionObserver(limitedUpdate);
+        positionObserver.observe(anchorElement);
+
+        // On anchor or popover resize
+        const resizeObserver = new ResizeObserver(limitedUpdate);
+        resizeObserver.observe(anchorElement);
+        resizeObserver.observe(popperElement);
+        return () => {
+            resizeObserver.disconnect();
+            positionObserver.disconnect();
+        };
+    }, [anchorRef, popperElement, update]);
 
     const position = state?.placement ?? placement;
 
@@ -150,8 +176,12 @@ export function usePopoverStyle({
             newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;
         }
 
+        // Do not show the popover while it's not properly placed
+        if (!newStyles.transform) newStyles.visibility = 'hidden';
+
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
+
     return {
         styles: { arrow: styles.arrow, popover: popoverStyle },
         attributes,