@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/dialog/Dialog.tsx

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

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

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

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

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

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

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

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

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

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

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

@@ -1,31 +0,0 @@
-import range from 'lodash/range';
-import React, { 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

@@ -1,66 +0,0 @@
-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',
-    });
-});