@lumx/react 3.20.1-alpha.5 → 3.20.1-alpha.50

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

@@ -1,92 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,264 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-import React from 'react';
-
-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

@@ -1,201 +0,0 @@
-import React, { 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;