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

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,288 @@
+import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { HeadingLevelProvider, Progress, ProgressVariant, Size } from '@lumx/react';
+
+import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
+import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
+
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
+
+import { Portal } from '@lumx/react/utils';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DialogProps extends GenericProps {
+    /** Footer content. */
+    footer?: ReactNode;
+    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    forceFooterDivider?: boolean;
+    /** Header content. */
+    header?: ReactNode;
+    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    forceHeaderDivider?: boolean;
+    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+    isLoading?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Reference to the parent element that triggered modal opening (will get back focus on close). */
+    parentElement?: RefObject<HTMLElement>;
+    /** Reference to the dialog content element. */
+    contentRef?: Ref<HTMLDivElement>;
+    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
+    focusElement?: RefObject<HTMLElement>;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
+    /** Size variant. */
+    size?: DialogSizes;
+    /** Z-axis position. */
+    zIndex?: number;
+    /** Z-axis position. */
+    dialogProps?: GenericProps;
+    /** On close callback. */
+    onClose?(): void;
+    /** Callback called when the open animation starts and the close animation finishes. */
+    onVisibilityChange?(isVisible: boolean): void;
+    /** whether to disable the scroll on the body or not */
+    disableBodyScroll?: boolean;
+    /** Children */
+    children?: React.ReactNode;
+}
+
+export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Dialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<DialogProps> = {
+    size: Size.big,
+    disableBodyScroll: true,
+};
+
+/**
+ * Dialog component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
+    if (!DOCUMENT) {
+        // Can't render in SSR.
+        return null;
+    }
+
+    const {
+        children,
+        className,
+        header,
+        focusElement,
+        forceFooterDivider,
+        forceHeaderDivider,
+        footer,
+        isLoading,
+        isOpen,
+        onClose,
+        parentElement,
+        contentRef,
+        preventAutoClose,
+        size = DEFAULT_PROPS.size,
+        zIndex,
+        dialogProps,
+        onVisibilityChange,
+        disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,
+        preventCloseOnClick,
+        preventCloseOnEscape,
+        ...forwardedProps
+    } = props;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const previousOpen = React.useRef(isOpen);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
+
+    const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    /**
+     * Since the `contentRef` comes from the parent and is optional,
+     * we need to create a stable contentRef that will always be available.
+     */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const localContentRef = useRef<HTMLDivElement>(null);
+    // Handle focus trap.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {
+        threshold: [0, 1],
+    });
+
+    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);
+    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);
+
+    // Separate header, footer and dialog content from children.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [[headerChild], [footerChild], content] = useMemo(
+        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),
+        [children],
+    );
+    const headerChildProps = (headerChild as ReactElement)?.props;
+    const headerChildContent = headerChildProps?.children;
+    const footerChildProps = (footerChild as ReactElement)?.props;
+    const footerChildContent = footerChildProps?.children;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
+
+    const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
+
+    return isOpen || isVisible ? (
+        <Portal>
+            <div
+                ref={mergeRefs(rootRef, ref)}
+                {...forwardedProps}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        isHidden: !isOpen,
+                        isLoading,
+                        isShown: isOpen || isVisible,
+                        prefix: CLASSNAME,
+                        size,
+                    }),
+                )}
+                style={{ zIndex }}
+            >
+                <div className={`${CLASSNAME}__overlay`} />
+
+                <HeadingLevelProvider level={2}>
+                    <ThemeProvider value={undefined}>
+                        <div className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
+                            <ClickAwayProvider
+                                callback={!shouldPreventCloseOnClickAway && onClose}
+                                childrenRefs={clickAwayRefs}
+                                parentRef={rootRef}
+                            >
+                                <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                    {(header || headerChildContent) && (
+                                        <header
+                                            {...headerChildProps}
+                                            className={classNames(
+                                                `${CLASSNAME}__header`,
+                                                (forceHeaderDivider || hasTopIntersection) &&
+                                                    `${CLASSNAME}__header--has-divider`,
+                                                headerChildProps?.className,
+                                            )}
+                                        >
+                                            {header}
+                                            {headerChildContent}
+                                        </header>
+                                    )}
+
+                                    <div
+                                        ref={mergeRefs(contentRef, localContentRef)}
+                                        className={`${CLASSNAME}__content`}
+                                    >
+                                        <div
+                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                            ref={setSentinelTop}
+                                        />
+
+                                        {content}
+
+                                        <div
+                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                            ref={setSentinelBottom}
+                                        />
+                                    </div>
+
+                                    {(footer || footerChildContent) && (
+                                        <footer
+                                            {...footerChildProps}
+                                            className={classNames(
+                                                `${CLASSNAME}__footer`,
+                                                (forceFooterDivider || hasBottomIntersection) &&
+                                                    `${CLASSNAME}__footer--has-divider`,
+                                                footerChildProps?.className,
+                                            )}
+                                        >
+                                            {footer}
+                                            {footerChildContent}
+                                        </footer>
+                                    )}
+
+                                    {isLoading && (
+                                        <div className={`${CLASSNAME}__progress-overlay`}>
+                                            <Progress variant={ProgressVariant.circular} />
+                                        </div>
+                                    )}
+                                </section>
+                            </ClickAwayProvider>
+                        </div>
+                    </ThemeProvider>
+                </HeadingLevelProvider>
+            </div>
+        </Portal>
+    ) : null;
+});
+Dialog.displayName = COMPONENT_NAME;
+Dialog.className = CLASSNAME;
+Dialog.defaultProps = DEFAULT_PROPS;

package/src/components/dialog/index.ts

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

package/src/components/divider/Divider.test.tsx

@@ -0,0 +1,51 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+
+import { Theme } from '@lumx/react';
+import { render, screen } from '@testing-library/react';
+import { Divider, DividerProps } from './Divider';
+
+const CLASSNAME = Divider.className as string;
+
+type SetupProps = Partial<DividerProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: DividerProps = { ...propsOverride };
+
+    render(<Divider {...props} />, { wrapper });
+    const divider = screen.queryByRole('separator');
+
+    return { props, divider };
+};
+
+describe(`<${Divider.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { divider } = setup();
+            expect(divider).toBeInTheDocument();
+            expect(divider).toHaveClass(CLASSNAME);
+            expect(divider).toHaveClass(`${CLASSNAME}--theme-light`);
+        });
+
+        it('should render dark Theme', () => {
+            const { divider } = setup({ theme: Theme.dark });
+            expect(divider).toHaveClass(`${CLASSNAME}--theme-dark`);
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'divider',
+        forwardAttributes: 'divider',
+        forwardRef: 'divider',
+        applyTheme: {
+            affects: [{ element: 'divider' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

package/src/components/divider/Divider.tsx

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+
+import { Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DividerProps extends GenericProps, HasTheme {}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Divider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<DividerProps> = {};
+
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
+
+    return (
+        <hr
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+        />
+    );
+});
+Divider.displayName = COMPONENT_NAME;
+Divider.className = CLASSNAME;
+Divider.defaultProps = DEFAULT_PROPS;

package/src/components/divider/index.ts

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

package/src/components/drag-handle/DragHandle.test.tsx

@@ -0,0 +1,36 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { DragHandle, DragHandleProps } from './DragHandle';
+
+const CLASSNAME = DragHandle.className as string;
+
+type SetupProps = Partial<DragHandleProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: DragHandleProps = { ...propsOverride };
+
+    const { container } = render(<DragHandle {...props} />, { wrapper });
+    const handle = queryByClassName(container, CLASSNAME);
+
+    return { props, handle };
+};
+
+describe(`<${DragHandle.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'handle',
+        forwardAttributes: 'handle',
+        forwardRef: 'handle',
+        applyTheme: {
+            affects: [{ element: 'handle' }],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
+});

package/src/components/drag-handle/DragHandle.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+
+import { mdiDragVertical } from '@lumx/icons';
+import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DragHandleProps extends GenericProps, HasTheme {}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DragHandle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+        >
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
+        </div>
+    );
+});
+DragHandle.displayName = COMPONENT_NAME;
+DragHandle.className = CLASSNAME;

package/src/components/drag-handle/index.ts

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

package/src/components/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,31 @@
+import range from 'lodash/range';
+import { useRef, useState } from 'react';
+
+import { Button, Dropdown, List, ListItem } from '@lumx/react';
+
+export default { title: 'LumX components/dropdown/Dropdown' };
+
+export const InfiniteScroll = () => {
+    const buttonRef = useRef(null);
+    const [items, setItems] = useState(range(10));
+    const onInfiniteScroll = () => {
+        setItems([...items, ...range(items.length, items.length + 10)]);
+    };
+
+    return (
+        <>
+            <Button ref={buttonRef}>Anchor</Button>
+            <Dropdown anchorRef={buttonRef} isOpen onInfiniteScroll={onInfiniteScroll}>
+                <List>
+                    {items.map((item) => (
+                        <ListItem key={item}>{item}</ListItem>
+                    ))}
+                </List>
+            </Dropdown>
+        </>
+    );
+};
+InfiniteScroll.parameters = {
+    // Disables Chromatic snapshot (not relevant for this story).
+    chromatic: { disable: true },
+};

package/src/components/dropdown/Dropdown.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
+import { Dropdown, DropdownProps } from './Dropdown';
+
+const CLASSNAME = Dropdown.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<DropdownProps> = {}) => {
+    const anchorRef = React.createRef<HTMLButtonElement>();
+    const props: DropdownProps = {
+        anchorRef,
+        children: <div>This is the content of the dropdown</div>,
+        isOpen: true,
+        ...propsOverride,
+    };
+    render(<Dropdown {...props} />);
+    const dropDown = queryByClassName(document.body, CLASSNAME);
+    return { props, dropDown };
+};
+
+describe(`<${Dropdown.displayName}>`, () => {
+    describe('Events', () => {
+        it('should trigger `onClose` when pressing `escape` key', async () => {
+            const onClose = vi.fn();
+            setup({
+                closeOnEscape: true,
+                onClose,
+                isOpen: true,
+            });
+
+            await userEvent.keyboard('[Escape]');
+            expect(onClose).toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing any other key', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose, closeOnEscape: true });
+
+            await userEvent.keyboard('a');
+            expect(onClose).not.toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose, closeOnEscape: false });
+
+            await userEvent.keyboard('[Escape]');
+            expect(onClose).not.toHaveBeenCalled();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'dropDown',
+        forwardAttributes: 'dropDown',
+        forwardRef: 'dropDown',
+    });
+});