@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/testing/utils/commonTestsSuiteRTL.tsx

@@ -1,193 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import React from 'react';
-import { Theme } from '@lumx/react';
-import { RenderOptions } from '@testing-library/react';
-import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
-import castArray from 'lodash/castArray';
-import { invertTheme } from '@lumx/react/utils/theme/invertTheme';
-
-interface CommonSetup {
-    props: GenericProps;
-}
-
-type AffectConfig<E> = { element: E; classModifier?: 'color' | 'theme'; inverted?: boolean };
-type Not<E> = { not: E };
-
-interface Options<S extends CommonSetup> {
-    baseClassName: string;
-    forwardClassName?: keyof S;
-    forwardAttributes?: keyof S;
-    forwardRef?: keyof S;
-    applyTheme?: {
-        /** Element(s) to which we apply the theme class */
-        affects: Array<AffectConfig<keyof S> | Not<AffectConfig<keyof S>>>;
-        /** Apply theme via theme prop */
-        viaProp: boolean;
-        /** Apply theme via theme context */
-        viaContext: boolean;
-        /** Apply a default theme if no prop or context was provided */
-        defaultTheme?: Theme;
-        /** Default props to apply when testing theme */
-        defaultProps?: S['props'];
-    };
-}
-
-export type RenderWrapper = RenderOptions['wrapper'];
-export type SetupRenderOptions = { wrapper?: RenderWrapper };
-export type SetupFunction<S extends CommonSetup> = (
-    props?: GenericProps,
-    options?: SetupRenderOptions,
-) => S | Promise<S>;
-
-/**
- * Common tests on components
- * - Check base class name and class name forwarding
- * - Check props forwarding
- */
-export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<S>, options: Options<S>): void {
-    if (isEmpty(options)) {
-        return;
-    }
-    const { baseClassName, forwardClassName, forwardAttributes, forwardRef, applyTheme } = options;
-    describe('Common tests suite', () => {
-        it('should render with base class name', async () => {
-            await setup();
-            expect(queryByClassName(document.body, baseClassName)).toBeInTheDocument();
-        });
-
-        if (forwardClassName) {
-            it('should forward any CSS class', async () => {
-                const modifiedProps = {
-                    className: 'component component--is-tested',
-                };
-                const wrappers = await setup(modifiedProps);
-                expect(wrappers[forwardClassName]).toHaveClass(modifiedProps.className);
-            });
-        }
-
-        if (forwardAttributes) {
-            it('should forward any other prop', async () => {
-                const modifiedProps = {
-                    winter: 'is coming',
-                };
-                const wrappers = await setup(modifiedProps);
-                expect(wrappers[forwardAttributes]).toHaveAttribute('winter', modifiedProps.winter);
-            });
-        }
-
-        if (forwardRef) {
-            it('should forward ref', async () => {
-                const ref = React.createRef();
-                const wrappers = await setup({ ref });
-                expect(ref.current).toBe(wrappers[forwardRef]);
-            });
-        }
-
-        if (applyTheme) {
-            describe('theme', () => {
-                const { affects, defaultTheme, viaProp, viaContext } = applyTheme;
-                const testElements = affects.map((configOrNot) => {
-                    let shouldHaveModifier: boolean = true;
-                    let config: AffectConfig<any>;
-                    if ('not' in configOrNot) {
-                        shouldHaveModifier = false;
-                        config = configOrNot.not;
-                    } else config = configOrNot;
-
-                    const {
-                        element,
-                        classModifier = 'theme',
-                        inverted = false,
-                    }: AffectConfig<any> = typeof config === 'object' ? config : { element: config };
-                    return {
-                        element,
-                        getExpectedClassModifier: (theme: Theme) =>
-                            `--${classModifier}-${inverted ? invertTheme(theme) : theme}`,
-                        shouldHaveModifier,
-                        apply: shouldHaveModifier ? 'apply' : 'not apply',
-                    };
-                });
-
-                const expectTheme = (
-                    wrappers: any,
-                    { element, getExpectedClassModifier, shouldHaveModifier }: any,
-                    theme: Theme,
-                    override: { shouldHaveModifier?: boolean } = {},
-                ) => {
-                    for (const wrapper of castArray(wrappers[element])) {
-                        let expected: any = expect(wrapper.className);
-                        if (override.shouldHaveModifier === false || !shouldHaveModifier) {
-                            expected = expected.not;
-                        }
-                        expected.toContain(getExpectedClassModifier(theme));
-                    }
-                };
-
-                if (defaultTheme) {
-                    it.each(testElements)(
-                        `should $apply default theme (${defaultTheme}) to \`$element\``,
-                        async (affectedElement) => {
-                            const wrappers = await setup(applyTheme.defaultProps);
-                            expectTheme(wrappers, affectedElement, defaultTheme);
-                        },
-                    );
-                }
-
-                // Only the elements that are affected by theme
-                const affectedElements = testElements.filter((e) => e.shouldHaveModifier);
-                if (!defaultTheme && affectedElements.length) {
-                    it.each(affectedElements)(
-                        `should not apply default theme (${defaultTheme}) to \`$element\``,
-                        async (affectedElement) => {
-                            const wrappers = await setup(applyTheme.defaultProps);
-                            expectTheme(wrappers, affectedElement, Theme.light, { shouldHaveModifier: false });
-                            expectTheme(wrappers, affectedElement, Theme.dark, { shouldHaveModifier: false });
-                        },
-                    );
-                }
-
-                if (viaProp) {
-                    const theme = invertTheme(defaultTheme || Theme.light);
-                    it.each(testElements)(
-                        `should $apply prop theme=${theme} to \`$element\``,
-                        async (affectedElement) => {
-                            const wrappers = await setup({ ...applyTheme.defaultProps, theme });
-                            expectTheme(wrappers, affectedElement, theme);
-                        },
-                    );
-                }
-
-                const contextTheme = invertTheme(defaultTheme || Theme.light);
-                it.each(testElements)(
-                    `should $apply context theme=${contextTheme} to \`$element\``,
-                    async (affectedElement) => {
-                        const Wrapper = ({ children }: any) => (
-                            <ThemeProvider value={contextTheme}>{children}</ThemeProvider>
-                        );
-                        const wrappers = await setup({}, { wrapper: Wrapper });
-                        expectTheme(wrappers, affectedElement, contextTheme, {
-                            shouldHaveModifier: !viaContext ? false : undefined,
-                        });
-                    },
-                );
-
-                if (viaProp && viaContext) {
-                    const propTheme = invertTheme(contextTheme);
-                    it.each(testElements)(
-                        `should $apply prop theme=${propTheme} to \`$element\` overriding the context theme=${contextTheme}`,
-                        async (affectedElement) => {
-                            const Wrapper = ({ children }: any) => (
-                                <ThemeProvider value={contextTheme}>{children}</ThemeProvider>
-                            );
-                            const wrappers = await setup({ theme: propTheme }, { wrapper: Wrapper });
-                            expectTheme(wrappers, affectedElement, propTheme);
-                        },
-                    );
-                }
-            });
-        }
-    });
-}

package/src/testing/utils/index.ts

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

package/src/testing/utils/queries.ts

@@ -1,19 +0,0 @@
-import { buildQueries } from '@testing-library/dom';
-
-export const queryAllByClassName = (container: HTMLElement, className: string) =>
-    Array.from(container.getElementsByClassName(className) as HTMLCollectionOf<HTMLElement>);
-
-export const [queryByClassName, getAllByClassName, getByClassName, findAllByClassName, findByClassName] = buildQueries(
-    queryAllByClassName,
-    (_, className) => `Multiple \`.${className}\` found`,
-    (_, className) => `No \`.${className}\` found`,
-);
-
-export const queryAllByTagName = (container: HTMLElement, tagName: string) =>
-    Array.from(container.getElementsByTagName(tagName) as HTMLCollectionOf<HTMLElement>);
-
-export const [queryByTagName, getAllByTagName, getByTagName, findAllByTagName, findByTagName] = buildQueries(
-    queryAllByTagName,
-    (_, tagName) => `Multiple \`${tagName}\` found`,
-    (_, tagName) => `No \`${tagName}\` found`,
-);

package/src/untypped-modules.d.ts

@@ -1,5 +0,0 @@
-/**
- * List untypped modules here to declare them as explicit any.
- */
-declare module 'test-data-bot';
-declare module '*.jpg';

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,70 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import React, { useCallback, useRef, useState } from 'react';
-import { Button } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
-import { PortalProvider, Portal } from '@lumx/react/utils/Portal';
-
-export default {
-    title: 'LumX components/ClickAwayProvider',
-    parameters: {
-        // Disables Chromatic snapshot (not relevant for this story).
-        chromatic: { disable: true },
-    },
-};
-
-// eslint-disable-next-line react/display-name
-const Card = React.forwardRef(({ top, children, close }, ref) => (
-    <ClickAwayProvider callback={close} childrenRefs={useRef([ref])}>
-        <Portal>
-            <div
-                className="lumx-spacing-padding"
-                ref={ref}
-                style={{ position: 'absolute', top, border: '1px solid red' }}
-            >
-                {children}
-            </div>
-        </Portal>
-    </ClickAwayProvider>
-));
-
-const ButtonWithCard = ({ level, parentRef }) => {
-    const ref3 = useRef();
-    const [isOpen3, setOpen3] = useState(false);
-    const open3 = useCallback(() => setOpen3(true), []);
-    const close3 = useCallback(() => setOpen3(false), []);
-    const nextLevel = level + 1;
-
-    return (
-        <>
-            Level {level} - <Button onClick={open3}>Open level {nextLevel}</Button>
-            {isOpen3 && (
-                <Card ref={ref3} close={close3} top={parentRef?.current?.getBoundingClientRect().bottom || '130px'}>
-                    {nextLevel === 4 ? `Level ${nextLevel}` : <ButtonWithCard level={nextLevel} parentRef={ref3} />}
-                </Card>
-            )}
-        </>
-    );
-};
-
-/**
- * This story showcases the detection of click away inside a nested React portal tree (i.e. not nested in the DOM)
- */
-export const NestedClickAway = () => (
-    <>
-        <p>Clicking inside a level should close all child levels but not parent levels</p>
-        <ButtonWithCard level={0} />
-    </>
-);
-
-/**
- * Testing close on click away for a popover rendered in a shadow DOM
- */
-export const InShadowDOM = () => {
-    return (
-        <PortalProvider value={initDemoShadowDOMPortal}>
-            <NestedClickAway />
-        </PortalProvider>
-    );
-};

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,69 +0,0 @@
-import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
-import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
-
-interface ContextValue {
-    childrenRefs: Array<RefObject<HTMLElement>>;
-    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;
-}
-
-const ClickAwayAncestorContext = createContext<ContextValue | null>(null);
-
-interface ClickAwayProviderProps extends ClickAwayParameters {
-    /**
-     * (Optional) Element that should be considered as part of the parent
-     */
-    parentRef?: RefObject<HTMLElement>;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
- * we take into account both the DOM tree and the React tree to detect click away.
- *
- * @return the react component.
- */
-export const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({
-    children,
-    callback,
-    childrenRefs,
-    parentRef,
-}) => {
-    const parentContext = useContext(ClickAwayAncestorContext);
-    const currentContext = useMemo(() => {
-        const context: ContextValue = {
-            childrenRefs: [],
-            /**
-             * Add element refs to the current context and propagate to the parent context.
-             */
-            addRefs(...newChildrenRefs) {
-                // Add element refs that should be considered as inside the click away context.
-                context.childrenRefs.push(...newChildrenRefs);
-
-                if (parentContext) {
-                    // Also add then to the parent context
-                    parentContext.addRefs(...newChildrenRefs);
-                    if (parentRef) {
-                        // The parent element is also considered as inside the parent click away context but not inside the current context
-                        parentContext.addRefs(parentRef);
-                    }
-                }
-            },
-        };
-        return context;
-    }, [parentContext, parentRef]);
-
-    useEffect(() => {
-        const { current: currentRefs } = childrenRefs;
-        if (!currentRefs) {
-            return;
-        }
-        currentContext.addRefs(...currentRefs);
-    }, [currentContext, childrenRefs]);
-
-    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });
-    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;
-};
-ClickAwayProvider.displayName = 'ClickAwayProvider';

package/src/utils/ClickAwayProvider/index.ts

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

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Switch } from '@lumx/react/components/switch';
-import { Alignment } from '@lumx/react';
-
-// Global state used to
-const globalState = {
-    isEnabled: false,
-    styleSheet: null as any,
-};
-
-/** Toggle apply the material CSS override. */
-export async function toggleMaterialTheme(wasEnabled: boolean) {
-    globalState.isEnabled = !wasEnabled;
-
-    // Inject the material theme CSS file.
-    if (!globalState.styleSheet) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const cssCode = await import('!!raw-loader!@lumx/core/css/material.css');
-
-        // Inject CSS override in a <style> node in <head>
-        const style = document.createElement('style');
-        style.textContent = cssCode.default;
-        document.head.appendChild(style);
-
-        globalState.styleSheet = style.sheet;
-    }
-    // Disable/Enable stylesheet
-    globalState.styleSheet.disabled = !globalState.isEnabled;
-}
-
-export const MaterialThemeSwitcher: React.FC<any> = ({ theme }) => {
-    const [isEnabled, setEnabled] = useState(globalState.isEnabled);
-    const toggleTheme = useCallback(
-        () =>
-            setEnabled((wasEnabled) => {
-                toggleMaterialTheme(wasEnabled);
-                return !wasEnabled;
-            }),
-        [],
-    );
-
-    return (
-        <Switch
-            className="material-theme-switcher"
-            isChecked={isEnabled}
-            onChange={toggleTheme}
-            position={Alignment.right}
-            theme={theme}
-        >
-            Material theme
-        </Switch>
-    );
-};

package/src/utils/MaterialThemeSwitcher/index.ts

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

package/src/utils/Portal/Portal.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Portal } from './Portal';
-
-const TEST_ID = 'portal-child';
-const PortalChild = () => <div data-testid={TEST_ID}>Hello from portal</div>;
-
-describe(Portal, () => {
-    it('should render portal content in document.body by default', () => {
-        render(
-            <Portal>
-                <PortalChild />
-            </Portal>,
-        );
-
-        const child = screen.getByTestId(TEST_ID);
-        expect(child.parentElement).toBe(document.body);
-    });
-
-    it('should render inline when enabled is false', () => {
-        const { container } = render(
-            <div id="wrapper">
-                <Portal enabled={false}>
-                    <PortalChild />
-                </Portal>
-            </div>,
-        );
-
-        const child = screen.getByTestId(TEST_ID);
-        expect(child.parentElement).toBe(container.querySelector('#wrapper'));
-    });
-});

package/src/utils/Portal/Portal.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { PortalContext } from './PortalProvider';
-
-export interface PortalProps {
-    enabled?: boolean;
-    children: React.ReactNode;
-}
-
-/**
- * Render children in a portal outside the current DOM position
- * (defaults to `document.body` but can be customized with the PortalContextProvider)
- */
-export const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {
-    const init = React.useContext(PortalContext);
-    const context = React.useMemo(
-        () => {
-            return enabled ? init() : null;
-        },
-        // Only update on 'enabled'
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [enabled],
-    );
-
-    React.useLayoutEffect(() => {
-        return context?.teardown;
-    }, [context?.teardown, enabled]);
-
-    if (!context?.container) {
-        return <>{children}</>;
-    }
-    return createPortal(children, context.container);
-};

package/src/utils/Portal/PortalProvider.stories.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Button } from '@lumx/react';
-import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
-import { PortalProvider } from './PortalProvider';
-import { Portal } from './Portal';
-
-export default {
-    title: 'LumX components/PortalProvider',
-    component: PortalProvider,
-    args: { enabled: true },
-    parameters: { chromatic: { disable: true } },
-};
-
-/**
- * Demonstrate how to customize portals to render into a custom shadow root
- */
-export const RenderInShadowDOM = ({ enabled }) => (
-    <PortalProvider value={initDemoShadowDOMPortal}>
-        <Portal enabled={enabled}>
-            <Button>My button {!enabled && 'not'} in a shadow DOM portal</Button>
-        </Portal>
-    </PortalProvider>
-);

package/src/utils/Portal/PortalProvider.test.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { PortalInit, PortalProvider } from './PortalProvider';
-import { Portal } from './Portal';
-
-const TEST_ID = 'portal-child';
-const PORTAL_CONTAINER_ID = 'portal-container';
-
-const PortalChild = () => <div data-testid={TEST_ID}>Hello from portal</div>;
-
-describe('PortalProvider', () => {
-    it('should render portal content in the provided container', () => {
-        const portalContainer = document.createElement('div');
-        portalContainer.id = PORTAL_CONTAINER_ID;
-        document.body.appendChild(portalContainer);
-
-        const getContainer: PortalInit = () => ({ container: portalContainer });
-
-        render(
-            <PortalProvider value={getContainer}>
-                <Portal>
-                    <PortalChild />
-                </Portal>
-            </PortalProvider>,
-        );
-
-        const child = screen.getByTestId(TEST_ID);
-        expect(child.parentElement).toBe(portalContainer);
-        portalContainer.remove();
-    });
-
-    it('should call teardown on unmount', () => {
-        const teardownMock = jest.fn();
-        const portalContainer = document.createElement('div');
-        portalContainer.id = PORTAL_CONTAINER_ID;
-        document.body.appendChild(portalContainer);
-
-        const getContainer: PortalInit = () => ({
-            container: portalContainer,
-            teardown: teardownMock,
-        });
-
-        const { unmount } = render(
-            <PortalProvider value={getContainer}>
-                <Portal>
-                    <PortalChild />
-                </Portal>
-            </PortalProvider>,
-        );
-
-        expect(teardownMock).not.toHaveBeenCalled();
-        unmount();
-        expect(teardownMock).toHaveBeenCalledTimes(1);
-        portalContainer.remove();
-    });
-
-    it('should render inline if provider does not return a container', () => {
-        const getContainer: PortalInit = () => ({}); // No container
-
-        const { container } = render(
-            <div id="wrapper">
-                <PortalProvider value={getContainer}>
-                    <Portal>
-                        <PortalChild />
-                    </Portal>
-                </PortalProvider>
-            </div>,
-        );
-
-        const child = screen.getByTestId(TEST_ID);
-        expect(child.parentElement).toBe(container.querySelector('#wrapper'));
-    });
-});

package/src/utils/Portal/PortalProvider.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-type Container = DocumentFragment | Element;
-
-/**
- * Portal initializing function.
- * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
- */
-export type PortalInit = () => {
-    container?: Container;
-    teardown?: () => void;
-};
-
-export const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));
-
-export interface PortalProviderProps {
-    children?: React.ReactNode;
-    value: PortalInit;
-}
-
-/**
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
- */
-export const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;

package/src/utils/Portal/index.tsx

@@ -1,2 +0,0 @@
-export { type PortalInit, PortalProvider, type PortalProviderProps } from './PortalProvider';
-export { type PortalProps, Portal } from './Portal';

package/src/utils/browser/DOM/findImage.tsx

@@ -1,3 +0,0 @@
-/** Find image in element including the element */
-export const findImage = (element: HTMLElement | null): HTMLImageElement | null =>
-    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img') || null;