@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/notification/Notifications.stories.tsx

@@ -0,0 +1,92 @@
+import { Notification, Kind } from '@lumx/react';
+import { NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
+
+export default {
+    title: 'LumX components/notification/Notification',
+    component: Notification,
+    args: Notification.defaultProps,
+    argTypes: {
+        type: getSelectArgType(Kind),
+        onClick: { action: true },
+    },
+    parameters: {
+        // Delay Chromatic snapshot to wait for notification to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: NOTIFICATION_TRANSITION_DURATION,
+        },
+    },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [withChromaticForceScreenSize()],
+};
+
+/**
+ * Error notification
+ */
+export const Error = {
+    args: {
+        type: Kind.error,
+        content: 'Error',
+        isOpen: true,
+    },
+};
+
+/**
+ * Info notification
+ */
+export const Info = {
+    args: {
+        type: Kind.info,
+        content: 'Info',
+        isOpen: true,
+    },
+};
+
+/**
+ * Success notification
+ */
+export const Success = {
+    args: {
+        type: Kind.success,
+        content: 'Success',
+        isOpen: true,
+    },
+};
+
+/**
+ * Warning notification
+ */
+export const Warning = {
+    args: {
+        type: Kind.warning,
+        content: 'Warning',
+        isOpen: true,
+    },
+};
+
+/**
+ * Info notification with action button
+ */
+export const InfoWithAction = {
+    argTypes: {
+        onActionClick: { action: true },
+    },
+    args: {
+        type: Kind.info,
+        content: 'InfoWithAction',
+        actionLabel: 'Undo',
+        isOpen: true,
+    },
+};
+
+/**
+ * Info notification rendered outside a React portal
+ */
+export const InfoWithoutPortal = {
+    args: {
+        ...Info.args,
+        usePortal: false,
+    },
+};

package/src/components/notification/constants.ts

@@ -0,0 +1,28 @@
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
+
+/**
+ * Notification delay before hiding.
+ */
+export const HIDE_DELAY = 6000;
+
+/**
+ * Notification icon and colors according to their type.
+ */
+export const NOTIFICATION_CONFIGURATION = {
+    error: {
+        color: 'red',
+        icon: mdiAlert,
+    },
+    info: {
+        color: 'blue',
+        icon: mdiInformation,
+    },
+    success: {
+        color: 'green',
+        icon: mdiCheckCircle,
+    },
+    warning: {
+        color: 'yellow',
+        icon: mdiAlertCircle,
+    },
+};

package/src/components/notification/index.ts

@@ -0,0 +1 @@
+export * from './Notification';

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

@@ -0,0 +1,264 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState } from 'react';
+
+import { mdiAccount, mdiBell } from '@lumx/icons';
+import {
+    Chip,
+    Emphasis,
+    Text,
+    Icon,
+    IconButton,
+    List,
+    ListItem,
+    Placement,
+    Popover,
+    Size,
+    Elevation,
+    Message,
+    FlexBox,
+    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',
+    component: Popover,
+    args: Popover.defaultProps,
+    argTypes: {
+        isOpen: { control: 'boolean' },
+        hasArrow: { control: 'boolean' },
+        placement: getSelectArgType(Placement),
+        elevation: getSelectArgType<Elevation>([1, 2, 3, 4, 5]),
+        ref: { control: false },
+        parentElement: { control: false },
+        focusElement: { control: false },
+        anchorRef: { control: false },
+        boundaryRef: { control: false },
+        children: { control: false },
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
+};
+
+/**
+ * Simple
+ */
+export const Simple = {
+    args: {
+        children: (
+            <Text as="p" className="lumx-spacing-padding-big">
+                Popover
+            </Text>
+        ),
+    },
+    render(props: any) {
+        const anchorRef = React.useRef(null);
+        return (
+            <>
+                <Chip ref={anchorRef} size="s" className="lumx-spacing-margin-big">
+                    Anchor
+                </Chip>
+                <Popover anchorRef={anchorRef} isOpen {...props} />
+            </>
+        );
+    },
+};
+
+/**
+ * Dark theme
+ */
+export const DarkTheme = {
+    ...Simple,
+    args: {
+        theme: 'dark',
+        children: (
+            <Text as="p" color="light" className="lumx-spacing-padding-big">
+                Popover
+            </Text>
+        ),
+        hasArrow: true,
+    },
+};
+
+/**
+ * Popover not using React.createPortal
+ */
+export const WithoutPortal = { ...Simple, args: { ...Simple.args, usePortal: false } };
+
+/**
+ * All base placements
+ */
+export const Placements = {
+    ...Simple,
+    argTypes: {
+        placement: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: {
+                padding: 80,
+            },
+            combinations: {
+                cols: {
+                    key: 'placement',
+                    options: [Placement.TOP, Placement.RIGHT, Placement.BOTTOM, Placement.LEFT],
+                },
+            },
+        }),
+    ],
+};
+
+/**
+ * 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);
+        const [isOpen, setIsOpen] = useState(false);
+
+        const toggleOpen = () => setIsOpen(!isOpen);
+
+        const [text, setText] = useState('Initial large span of text');
+        const [anchorSize, setAnchorSize] = useState<IconButtonProps['size']>('m');
+        useEffect(() => {
+            if (isOpen) {
+                const timers = [
+                    // Update popover size
+                    setTimeout(() => setText('Text'), 1000),
+                    // Update anchor size
+                    setTimeout(() => setAnchorSize('s'), 1000),
+                ];
+                return () => timers.forEach(clearTimeout);
+            }
+            setText('Initial large span of text');
+            setAnchorSize('m');
+            return undefined;
+        }, [isOpen]);
+
+        return (
+            <FlexBox orientation="vertical" gap="huge">
+                <Message kind="info">Test popover text resize (after 1sec) and anchor resize (after 1.5sec)</Message>
+                <FlexBox orientation="horizontal" vAlign="center">
+                    <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
+                        hasArrow
+                    >
+                        <Text as="p" className="lumx-spacing-padding-huge">
+                            {text}
+                        </Text>
+                    </Popover>
+                </FlexBox>
+            </FlexBox>
+        );
+    },
+    parameters: { chromatic: { disable: true } },
+};
+
+/**
+ * Testing popover with scroll inside
+ */
+export const TestScrollingPopover = {
+    render() {
+        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_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>
+        );
+    },
+    parameters: { chromatic: { disable: true } },
+};

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

@@ -0,0 +1,62 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
+import { Popover, PopoverProps } from './Popover';
+
+const CLASSNAME = Popover.className as string;
+
+const setup = (props: Partial<PopoverProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(
+        <Popover isOpen anchorRef={{ current: null }} usePortal={false} {...props} data-testid="popover">
+            {props.children || (
+                <>
+                    Popover content
+                    <ThemeSentinel />
+                </>
+            )}
+        </Popover>,
+        { wrapper },
+    );
+    const element = screen.getByTestId('popover');
+    const themeSentinel = screen.getByTestId(ThemeSentinel.testId);
+    return { props, container, element, themeSentinel };
+};
+
+describe(`<${Popover.displayName}>`, () => {
+    it('should render in portal', () => {
+        const { element } = setup({ usePortal: true });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveTextContent(/Popover content/);
+        expect(element.parentElement).toBe(document.body);
+    });
+
+    it('should render inline', () => {
+        const { element, container } = setup({ usePortal: false });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveTextContent(/Popover content/);
+        expect(element.parentElement).toBe(container);
+    });
+
+    it('should render with custom component', () => {
+        const { element } = setup({ as: 'span' });
+        expect(element).toBeInTheDocument();
+        expect(element.tagName).toBe('SPAN');
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        applyTheme: {
+            affects: [
+                { element: 'element' },
+                // Theme automatically transferred to the children
+                { element: 'themeSentinel' },
+            ],
+            viaProp: true,
+            // Parent context does not affect the popover
+            viaContext: false,
+        },
+    });
+});

package/src/components/popover/Popover.tsx

@@ -0,0 +1,201 @@
+import { ReactNode, RefObject, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
+import { useFocus } from '@lumx/react/hooks/useFocus';
+import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
+import { DOCUMENT } from '@lumx/react/constants';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { skipRender } from '@lumx/react/utils/react/skipRender';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
+import { Portal } from '@lumx/react/utils';
+import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
+import { usePopoverStyle } from './usePopoverStyle';
+import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
+
+/**
+ * Defines the props of the component.
+ */
+export interface PopoverProps extends GenericProps, HasTheme {
+    /** Reference to the DOM element used to set the position of the popover. */
+    anchorRef: React.RefObject<HTMLElement>;
+    /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
+    as?: React.ElementType;
+    /** Element which will act as boundary when opening the popover. */
+    boundaryRef?: RefObject<HTMLElement>;
+    /** Content. */
+    children: ReactNode;
+    /** Whether a click anywhere out of the popover would close it. */
+    closeOnClickAway?: boolean;
+    /** Whether an escape key press would close the popover. */
+    closeOnEscape?: boolean;
+    /** Shadow elevation. */
+    elevation?: Elevation;
+    /**
+     * Manage popover width:
+     *   - `maxWidth`: popover not bigger than anchor
+     *   - `minWidth` or `true`: popover not smaller than anchor
+     *   - `width`: popover equal to the anchor.
+     */
+    fitToAnchorWidth?: FitAnchorWidth | boolean;
+    /** Shrink popover if even after flipping there is not enough space. */
+    fitWithinViewportHeight?: boolean;
+    /** Element to focus when opening the popover. */
+    focusElement?: RefObject<HTMLElement>;
+    /** Whether the focus should go back on the anchor when popover closes and focus is within. */
+    focusAnchorOnClose?: boolean;
+    /** Whether we put an arrow or not. */
+    hasArrow?: boolean;
+    /** Whether the popover is open or not. */
+    isOpen: boolean;
+    /** Offset placement relative to anchor. */
+    offset?: Offset;
+    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+    parentElement?: RefObject<HTMLElement>;
+    /** Placement relative to anchor. */
+    placement?: Placement;
+    /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: RefObject<HTMLElement>;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** On close callback (on click away or Escape pressed). */
+    onClose?(): void;
+    /** Whether the popover should trap the focus within itself. Default to false. */
+    withFocusTrap?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Popover';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PopoverProps> = {
+    elevation: 3,
+    placement: Placement.AUTO,
+    focusAnchorOnClose: true,
+    usePortal: true,
+    zIndex: POPOVER_ZINDEX,
+};
+
+// Inner component (must be wrapped before export)
+const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
+    const {
+        anchorRef,
+        as: Component = 'div',
+        children,
+        className,
+        closeOnClickAway,
+        closeOnEscape,
+        elevation = DEFAULT_PROPS.elevation,
+        focusElement,
+        hasArrow,
+        isOpen,
+        onClose,
+        parentElement,
+        usePortal = DEFAULT_PROPS.usePortal,
+        focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
+        withFocusTrap,
+        boundaryRef,
+        fitToAnchorWidth,
+        fitWithinViewportHeight,
+        focusTrapZoneElement,
+        offset,
+        placement = DEFAULT_PROPS.placement,
+        style,
+        theme,
+        zIndex = DEFAULT_PROPS.zIndex,
+        ...forwardedProps
+    } = props;
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    const { styles, attributes, isPositioned, position, setArrowElement, setPopperElement, popperElement } =
+        usePopoverStyle({
+            offset,
+            hasArrow,
+            fitToAnchorWidth,
+            fitWithinViewportHeight,
+            boundaryRef,
+            anchorRef,
+            placement,
+            style,
+            zIndex,
+        });
+
+    const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
+    const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
+
+    useCallbackOnEscape(onClose, isOpen && closeOnEscape);
+
+    /** Only set focus within if the focus trap is disabled as they interfere with one another. */
+    useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
+    useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
+
+    const clickAwayRefs = useRef([popoverRef, anchorRef]);
+    const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);
+
+    return isOpen ? (
+        <Portal enabled={usePortal}>
+            <Component
+                {...forwardedProps}
+                ref={mergedRefs}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                        elevation: Math.min(elevation || 0, 5),
+                        position,
+                        isInitializing: !styles.popover?.transform,
+                    }),
+                )}
+                style={styles.popover}
+                {...attributes.popper}
+            >
+                {unmountSentinel}
+                <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>
+                    {hasArrow && (
+                        <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
+                            <svg viewBox="0 0 14 14" aria-hidden>
+                                <path d="M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" />
+                            </svg>
+                        </div>
+                    )}
+                    <ThemeProvider value={theme}>{children}</ThemeProvider>
+                </ClickAwayProvider>
+            </Component>
+        </Portal>
+    ) : null;
+});
+_InnerPopover.displayName = COMPONENT_NAME;
+
+/**
+ * Popover component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Popover: Comp<PopoverProps, HTMLDivElement> = skipRender(
+    // Skip render in SSR
+    () => Boolean(DOCUMENT),
+    _InnerPopover,
+);
+Popover.displayName = COMPONENT_NAME;
+Popover.className = CLASSNAME;
+Popover.defaultProps = DEFAULT_PROPS;