@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

package/dist/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+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 {};
+}