@lumx/react 3.11.1-alpha.0 → 3.11.1-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.1-alpha.0",
-        "@lumx/icons": "^3.11.1-alpha.0",
+        "@lumx/core": "^3.11.1-alpha.2",
+        "@lumx/icons": "^3.11.1-alpha.2",
         "@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.11.1-alpha.0"
+    "version": "3.11.1-alpha.2"
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { mdiAccount, mdiBell } from '@lumx/icons';
 import {
@@ -15,12 +15,16 @@ import {
     Size,
     Elevation,
     Message,
-    FlexBox, FlexBoxProps, IconButtonProps,
+    FlexBox,
+    FlexBoxProps,
+    IconButtonProps,
 } from '@lumx/react';
 import range from 'lodash/range';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+import { FitAnchorWidth } from '@lumx/react/components/popover/constants';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
 export default {
     title: 'LumX components/popover/Popover',
@@ -112,6 +116,46 @@ export const Placements = {
     ],
 };
 
+/**
+ * Demo all fitAnchorWidth configurations
+ */
+export const FitToAnchorWidth = {
+    render({ anchorText, fitAnchorWidth }: any) {
+        const anchorRef = useRef(null);
+        return (
+            <>
+                <Chip className="lumx-spacing-margin-huge" ref={anchorRef} size="s">
+                    {anchorText}
+                </Chip>
+                <Popover
+                    isOpen
+                    className="lumx-spacing-padding"
+                    placement="top"
+                    anchorRef={anchorRef}
+                    fitToAnchorWidth={fitAnchorWidth}
+                >
+                    Popover {fitAnchorWidth}
+                </Popover>
+            </>
+        );
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: {
+                    'Small Anchor': { anchorText: 'Small' },
+                    'Large Anchor': { anchorText: 'Very very very very large anchor' },
+                },
+                rows: { key: 'fitAnchorWidth', options: withUndefined(Object.values(FitAnchorWidth)) },
+            },
+            cellStyle: { padding: 16 },
+        }),
+    ],
+};
+
+/**
+ * Testing update of the popover on anchor and popover resize and move
+ */
 export const TestUpdatingChildrenAndMovingAnchor = {
     render() {
         const anchorRef = useRef(null);
@@ -119,7 +163,7 @@ export const TestUpdatingChildrenAndMovingAnchor = {
 
         const toggleOpen = () => setIsOpen(!isOpen);
 
-        const [text, setText] = useState('Long loading text with useless words');
+        const [text, setText] = useState('Initial large span of text');
         const [anchorSize, setAnchorSize] = useState<IconButtonProps['size']>('m');
         const [anchorPosition, setAnchorPosition] = useState<FlexBoxProps['vAlign']>('center');
         useEffect(() => {
@@ -131,7 +175,7 @@ export const TestUpdatingChildrenAndMovingAnchor = {
                 ];
                 return () => timers.forEach(clearTimeout);
             }
-            setText('Long loading text with useless words');
+            setText('Initial large span of text');
             setAnchorSize('m');
             setAnchorPosition('center');
             return undefined;
@@ -160,12 +204,11 @@ export const TestUpdatingChildrenAndMovingAnchor = {
                         placement={Placement.BOTTOM_END}
                         onClose={toggleOpen}
                         fitWithinViewportHeight
+                        hasArrow
                     >
-                        <List>
-                            <ListItem before={<Icon icon={mdiAccount} />} className="lumx-spacing-margin-right-huge">
-                                <span>{text}</span>
-                            </ListItem>
-                        </List>
+                        <Text as="p" className="lumx-spacing-padding-huge">
+                            {text}
+                        </Text>
                     </Popover>
                 </FlexBox>
             </FlexBox>
@@ -174,116 +217,52 @@ export const TestUpdatingChildrenAndMovingAnchor = {
     parameters: { chromatic: { disable: true } },
 };
 
-export const WithScrollingPopover = () => {
-    const anchorRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleOpen = () => setIsOpen(!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}
-                onClose={toggleOpen}
-                fitWithinViewportHeight
-            >
-                <List style={{ overflowY: 'auto' }}>
-                    {range(100).map((n: number) => {
-                        return (
-                            <ListItem
-                                key={`key-${n}`}
-                                before={<Icon icon={mdiAccount} />}
-                                className="lumx-spacing-margin-right-huge"
-                            >
-                                <span>{`List item ${n} and some text`}</span>
-                            </ListItem>
-                        );
-                    })}
-                </List>
-            </Popover>
-        </div>
-    );
-};
-
-export const FitToAnchorWidth = () => {
-    const demoPopperStyle = {
-        alignItems: 'center',
-        display: 'flex',
-        height: 100,
-        justifyContent: 'center',
-        width: 200,
-    };
-
-    const container = {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        gap: 150,
-        marginTop: 150,
-    } as const;
+/**
+ * Testing popover with scroll inside
+ */
+export const TestScrollingPopover = {
+    render() {
+        const anchorRef = useRef(null);
+        const [isOpen, setIsOpen] = useState(false);
 
-    const maxWidthAnchorRef = useRef(null);
-    const widthSmallAnchorRef = useRef(null);
-    const widthLargeAnchorRef = useRef(null);
-    const minWidthAnchorRef = useRef(null);
-    const defaultWidthAnchorRef = useRef(null);
+        const toggleOpen = () => setIsOpen(!isOpen);
 
-    return (
-        <div style={container}>
-            <div>
-                <Chip ref={maxWidthAnchorRef} size={Size.s}>
-                    Anchor
-                </Chip>
-            </div>
-            <Popover anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
-                <div style={demoPopperStyle}>Popover maxWidth</div>
-            </Popover>
-            <div>
-                <Chip ref={widthSmallAnchorRef} size={Size.s}>
-                    Anchor
-                </Chip>
-            </div>
-            <Popover anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
-                <div style={demoPopperStyle}>Popover width small anchor</div>
-            </Popover>
-            <div>
-                <Chip ref={widthLargeAnchorRef} size={Size.s}>
-                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
-                </Chip>
-            </div>
-            <Popover anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
-                <div style={demoPopperStyle}>Popover width large anchor</div>
-            </Popover>
-            <div>
-                <Chip ref={minWidthAnchorRef} size={Size.s}>
-                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
-                </Chip>
-            </div>
-            <Popover anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
-                <div style={demoPopperStyle}>Popover minWidth</div>
-            </Popover>
-            <div>
-                <Chip ref={defaultWidthAnchorRef} size={Size.s}>
-                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
-                </Chip>
+        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 style={{ overflowY: 'auto' }}>
+                        {range(100).map((n: number) => {
+                            return (
+                                <ListItem
+                                    key={`key-${n}`}
+                                    before={<Icon icon={mdiAccount} />}
+                                    className="lumx-spacing-margin-right-huge"
+                                >
+                                    <span>{`List item ${n} and some text`}</span>
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                </Popover>
             </div>
-            <Popover anchorRef={defaultWidthAnchorRef} isOpen placement="top">
-                <div style={demoPopperStyle}>Popover default</div>
-            </Popover>
-        </div>
-    );
+        );
+    },
+    parameters: { chromatic: { disable: true } },
 };

package/src/components/popover/Popover.tsx

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

package/src/components/popover/usePopoverStyle.tsx

@@ -6,7 +6,6 @@ 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.
@@ -153,17 +152,12 @@ export function usePopoverStyle({
             });
         }
 
-        // 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]);
 
@@ -177,7 +171,7 @@ export function usePopoverStyle({
         }
 
         // Do not show the popover while it's not properly placed
-        if (!newStyles.transform) newStyles.visibility = 'hidden';
+        if (!newStyles.transform) newStyles.opacity = 0;
 
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);

package/src/components/popover/PositionObserver.ts

@@ -1,155 +0,0 @@
-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;
-    };
-}