@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/testing/utils/queries.ts

@@ -1,19 +0,0 @@
-import { buildQueries } from '@testing-library/react';
-
-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/dist/src/untypped-modules.d.ts

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

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

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import { Button } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import React, { useCallback, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-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])}>
-        {createPortal(
-            <div
-                className="lumx-spacing-padding"
-                ref={ref}
-                style={{ position: 'absolute', top, border: '1px solid red' }}
-            >
-                {children}
-            </div>,
-            document.body,
-        )}
-    </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} />
-    </>
-);

package/dist/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,65 +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>;
-}
-
-/**
- * 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/dist/src/utils/ClickAwayProvider/index.ts

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

package/dist/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. */
-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/dist/src/utils/MaterialThemeSwitcher/index.ts

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

package/dist/src/utils/browserDoesNotSupportHover.test.js

@@ -1,24 +0,0 @@
-import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
-
-const originalMatchMedia = global.matchMedia;
-
-describe('browserDoesNotSupportHover', () => {
-    afterAll(() => {
-        global.matchMedia = originalMatchMedia;
-    });
-
-    it('should return `false` on browsers that do not support matchMedia', () => {
-        global.matchMedia = undefined;
-        expect(browserDoesNotSupportHover()).toBe(false);
-    });
-
-    it('should return `false` on browsers that support matchMedia and does support hover', () => {
-        global.matchMedia = () => ({ matches: false });
-        expect(browserDoesNotSupportHover()).toBe(false);
-    });
-
-    it('should return `true` on browsers that support matchMedia and does not support hover', () => {
-        global.matchMedia = () => ({ matches: true });
-        expect(browserDoesNotSupportHover()).toBe(true);
-    });
-});

package/dist/src/utils/browserDoesNotSupportHover.ts

@@ -1,2 +0,0 @@
-/** Return true if the browser does not support pointer hover */
-export const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;

package/dist/src/utils/clamp.ts

@@ -1,17 +0,0 @@
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-export const clamp = (value: number, min: number, max: number): number => {
-    if (value < min) {
-        return min;
-    }
-    if (value > max) {
-        return max;
-    }
-    return value;
-};

package/dist/src/utils/className.ts

@@ -1,44 +0,0 @@
-import { CSS_PREFIX } from '@lumx/react/constants';
-
-import kebabCase from 'lodash/kebabCase';
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react/components';
-
-// See https://regex101.com/r/YjS1uI/3
-const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
-
-export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-
-/**
- * Get the name of the root CSS class of a component based on its name.
- *
- * @param  componentName The name of the component. This name should contains the component prefix and be
- *                       written in PascalCase.
- * @param  subComponent Whether the current component is a sub component, if true, define the class according
- *                      to BEM standards.
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
- *         lower-snake-case.
- */
-export function getRootClassName(componentName: string, subComponent?: boolean): string {
-    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
-
-    if (subComponent) {
-        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
-    }
-    return formattedClassName;
-}
-
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
- */
-export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
-    return `lumx-color-font-${color}-${colorVariant}`;
-};
-
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-export const getTypographyClassName = (typography: Typography) => {
-    return `lumx-typography-${typography}`;
-};

package/dist/src/utils/event.ts

@@ -1 +0,0 @@
-export { onEnterPressed, onButtonPressed, onEscapePressed } from '@lumx/core/js/utils';

package/dist/src/utils/flattenChildren.test.tsx

@@ -1,58 +0,0 @@
-import { flattenChildren } from '@lumx/react/utils/flattenChildren';
-import { mount } from 'enzyme';
-import React from 'react';
-
-const Comp = ({ children }: any) => children;
-
-describe('flattenChildren', () => {
-    it('should flatten children in arrays or fragments', () => {
-        const nodes = (
-            <Comp>
-                {flattenChildren(
-                    <>
-                        <Comp>foo</Comp>
-                        {[
-                            <Comp key="1">bar</Comp>,
-                            <Comp key="2">{['baz', <Comp key="1">qux</Comp>]}</Comp>,
-                            ['quux', <Comp key="2">quuz</Comp>],
-                        ]}
-                        corge
-                        <>grault</>
-                    </>,
-                )}
-            </Comp>
-        );
-        expect(mount(nodes)).toMatchInlineSnapshot(`
-            <Comp>
-              <Comp
-                key=".0..0"
-              >
-                foo
-              </Comp>
-              <Comp
-                key=".0..1:$1"
-              >
-                bar
-              </Comp>
-              <Comp
-                key=".0..1:$2"
-              >
-                baz
-                <Comp
-                  key="1"
-                >
-                  qux
-                </Comp>
-              </Comp>
-              quux
-              <Comp
-                key=".0..1:2:$2"
-              >
-                quuz
-              </Comp>
-              corge
-              grault
-            </Comp>
-        `);
-    });
-});

package/dist/src/utils/flattenChildren.ts

@@ -1,27 +0,0 @@
-import get from 'lodash/get';
-import { Children, Key, ReactChild, ReactNode, cloneElement, isValidElement } from 'react';
-import { isFragment } from 'react-is';
-
-/**
- * Flatten list of react nodes removing fragments and adding keys.
- * based on: https://github.com/grrowl/react-keyed-flatten-children/blob/5d421644a449765ddd62b659946196b4b5d7b135/index.ts
- *
- * @param  children React nodes to flatten.
- * @return Flattened react nodes.
- */
-export function flattenChildren(children: ReactNode) {
-    function recur(nodes: ReactNode, keys: Key[] = []) {
-        return Children.toArray(nodes).reduce((acc: ReactChild[], node, index) => {
-            const nodeKeys = keys.concat(get(node, 'key') ?? index);
-            if (isFragment(node)) {
-                acc.push(...recur(node.props.children, nodeKeys));
-            } else if (isValidElement(node)) {
-                acc.push(cloneElement(node, { key: nodeKeys.join('.') }));
-            } else if (typeof node === 'string' || typeof node === 'number') {
-                acc.push(node);
-            }
-            return acc;
-        }, []);
-    }
-    return recur(children);
-}

package/dist/src/utils/focus/constants.ts

@@ -1,5 +0,0 @@
-/** CSS selector listing all tabbable elements. */
-export const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
-
-/** CSS selector matching element that are disabled (should not receive focus). */
-export const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;

package/dist/src/utils/focus/getFirstAndLastFocusable.test.ts

@@ -1,134 +0,0 @@
-import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
-
-function htmlToElement(html: string): any {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstChild;
-}
-
-describe(getFirstAndLastFocusable.name, () => {
-    it('should get empty', () => {
-        const element = htmlToElement(`<div></div>`);
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable).toEqual({});
-    });
-
-    it('should get single item', () => {
-        const element = htmlToElement(`<div><button /></div>`);
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable.last).toBe(focusable.first);
-    });
-
-    it('should get first and last', () => {
-        const element = htmlToElement(`
-            <div>
-                <div>Non focusable div</div>
-                <button>Simple button</button>
-                <div>Non focusable div</div>
-                <input />
-                <div>Non focusable div</div>
-            </div>
-        `);
-        const focusable = getFirstAndLastFocusable(element);
-        expect(focusable.first).toMatchInlineSnapshot(`
-            <button>
-              Simple button
-            </button>
-        `);
-        expect(focusable.first).toMatchInlineSnapshot(`
-            <button>
-              Simple button
-            </button>
-        `);
-    });
-
-    describe('match focusable elements', () => {
-        it('should match input element', () => {
-            const element = htmlToElement(`<div><input /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<input />`);
-        });
-
-        it('should match link element', () => {
-            const element = htmlToElement(`<div><a href="#" /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <a
-                  href="#"
-                />
-            `);
-        });
-
-        it('should match textarea element', () => {
-            const element = htmlToElement(`<div><textarea /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <textarea>
-                  &lt;/div&gt;
-                </textarea>
-            `);
-        });
-
-        it('should match element with tabindex', () => {
-            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <span
-                  tabindex="0"
-                />
-            `);
-        });
-
-        it('should keep disabled=false', () => {
-            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <button
-                  disabled="false"
-                />
-            `);
-        });
-
-        it('should keep aria-disabled=false', () => {
-            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`
-                <button
-                  aria-disabled="false"
-                />
-            `);
-        });
-    });
-
-    describe('skip disabled elements', () => {
-        it('should skip disabled', () => {
-            const element = htmlToElement(`<div><button disabled /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
-        });
-
-        it('should skip aria-disabled', () => {
-            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
-        });
-
-        it('should skip tabindex=-1', () => {
-            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
-        });
-
-        it('should skip input type hidden', () => {
-            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
-        });
-
-        it('should skip hidden input', () => {
-            const element = htmlToElement(`<div><input hidden /><button /></div>`);
-            const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
-        });
-    });
-});

package/dist/src/utils/focus/getFirstAndLastFocusable.ts

@@ -1,21 +0,0 @@
-import { getFocusableElements } from './getFocusableElements';
-
-/**
- * Get first and last elements focusable in an element.
- *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-export function getFirstAndLastFocusable(parentElement: HTMLElement) {
-    const focusableElements = getFocusableElements(parentElement);
-
-    // First non disabled element.
-    const first = focusableElements[0];
-    // Last non disabled element.
-    const last = focusableElements[focusableElements.length - 1];
-
-    if (last && first) {
-        return { first, last };
-    }
-    return {};
-}