@lumx/react 3.0.7 → 3.1.0

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

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

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

@@ -0,0 +1,7 @@
+import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
+
+const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+export function getFocusableElements(element: HTMLElement): HTMLElement[] {
+    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}

package/dist/src/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * WARNING: All modules exported here are exposed to NPM in '@lumx/react/utils'.
+ */
+
+export * from './ClickAwayProvider';

package/dist/src/utils/isInternetExplorer.ts

@@ -0,0 +1,15 @@
+import { WINDOW } from '@lumx/react/constants';
+
+/**
+ * Check if browser is IE
+ * @return Browser is IE or not
+ */
+export const isInternetExplorer = () => {
+    const userAgent = WINDOW?.navigator?.userAgent;
+    if (!userAgent) {
+        return false;
+    }
+    const msie = userAgent.indexOf('MSIE ');
+    const isIEVersion = !!userAgent.match(/Trident.*rv:11\./);
+    return msie > 0 || isIEVersion;
+};

package/dist/src/utils/makeListenerTowerContext.ts

@@ -0,0 +1,32 @@
+import last from 'lodash/last';
+import pull from 'lodash/pull';
+
+export type Listener = { enable(): void; disable(): void };
+
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+export function makeListenerTowerContext() {
+    const LISTENERS: Listener[] = [];
+
+    return {
+        register(listener: Listener) {
+            // Disable previous listener.
+            last(LISTENERS)?.disable();
+            // Keep track of current listener.
+            LISTENERS.push(listener);
+            // Enable current listener.
+            listener.enable();
+        },
+        unregister(listener: Listener) {
+            // Disable current listener.
+            listener.disable();
+            // Remove current listener.
+            pull(LISTENERS, listener);
+            // Enable previous listener.
+            last(LISTENERS)?.enable();
+        },
+    };
+}

package/dist/src/utils/mergeRefs.ts

@@ -0,0 +1,22 @@
+import { Falsy } from '@lumx/react/utils/type';
+import { MutableRefObject } from 'react';
+
+type FnRef<T> = (value: T) => void;
+
+/**
+ * Merge refs into a single function ref.
+ *
+ * @param  refs React references to merge.
+ * @return the merged ref.
+ */
+export function mergeRefs<T>(...refs: Array<MutableRefObject<T | null> | FnRef<T> | Falsy>): FnRef<T> {
+    return (value) =>
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref) {
+                // eslint-disable-next-line no-param-reassign
+                (ref as MutableRefObject<T>).current = value;
+            }
+        });
+}

package/dist/src/utils/partitionMulti.ts

@@ -0,0 +1,28 @@
+import concat from 'lodash/concat';
+import dropRight from 'lodash/dropRight';
+import last from 'lodash/last';
+import partition from 'lodash/partition';
+import reduce from 'lodash/reduce';
+import { Predicate } from './type';
+
+/**
+ * Similar to lodash `partition` function but working with multiple predicates.
+ *
+ * @example
+ * const isString = (s) => typeof s === 'string'
+ * const isNumber = (s) => typeof s === 'number'
+ * const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
+ * //=> [['a', 'b'], [1], [false]]
+ *
+ * @param  elements array of elements
+ * @param  predicates array of predicates to apply on elements
+ * @return partitioned elements by the given predicates
+ */
+export function partitionMulti<T>(elements: T[], predicates: Array<Predicate<T>>): T[][] {
+    return reduce(
+        predicates,
+        (partitioned: T[][], predicate: Predicate<T>) =>
+            concat(dropRight(partitioned), partition(last(partitioned), predicate)),
+        [elements],
+    );
+}

package/dist/src/utils/renderLink.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+interface Props {
+    linkAs: any;
+}
+
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+export const renderLink = <P extends Props>({ linkAs, ...forwardedProps }: P, ...children: ReactNode[]): ReactElement =>
+    React.createElement(linkAs || 'a', forwardedProps, ...children);

package/dist/src/utils/type.ts

@@ -0,0 +1,113 @@
+import get from 'lodash/get';
+import React, { ReactElement, ReactNode, Ref } from 'react';
+import { Theme } from '@lumx/react';
+
+/** Get types of the values of a record. */
+export type ValueOf<T extends Record<any, any>> = T[keyof T];
+
+/**
+ * Properties of a component to use to determine it's name.
+ * In the order of preference.
+ */
+const NAME_PROPERTIES: string[] = [
+    'type',
+    'type.displayName',
+    'displayName',
+    'name',
+    'type.name',
+    'props.mdxType',
+    '_reactInternalFiber.elementType.name',
+];
+
+/** LumX Component Type. */
+export type Comp<P, T = HTMLElement> = {
+    (props: P & { ref?: Ref<T> }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+
+/** Union type of all heading elements */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/** Union type of all text elements */
+export type TextElement = 'span' | 'p' | HeadingElement;
+
+export interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/**
+ * Define a generic props types.
+ */
+export interface GenericProps {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+
+/**
+ * Callback function type alias (use for readability)
+ */
+export type Callback = () => void;
+export type Predicate<T> = (t: T) => boolean;
+
+/**
+ * Create a predicate function that checks if a ReactNode is a react element from the given component.
+ *
+ * @param  component React function component or the component name
+ * @return predicate returning true if value is instance of the component
+ */
+export const isComponent = <C>(component: Comp<C, any> | string) => (instance: ReactNode): instance is ReactElement => {
+    const componentName = typeof component === 'string' ? component : component.displayName;
+
+    return (
+        !!get(instance, '$$typeof') &&
+        NAME_PROPERTIES.some((nameProperty: string): boolean => get(instance, nameProperty) === componentName)
+    );
+};
+
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+export const isComponentType = (type: ReactElement['type']) => (node: ReactNode): node is ReactElement =>
+    React.isValidElement(node) && node.type === type;
+
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+export type Falsy = false | undefined | null | 0 | '';
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
+    ? {
+          /**
+           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+           * Although it is not recommended, aria-label can be used instead if no visible element is available.
+           */
+          'aria-labelledby': T;
+          /** The label of the dialog. */
+          'aria-label'?: undefined;
+      }
+    : {
+          'aria-label': string;
+          'aria-labelledby'?: undefined;
+      };

package/dist/src/utils/userHasReducedMotion.ts

@@ -0,0 +1,7 @@
+export const userHasReducedMotion = () => {
+    try {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    } catch (e) {
+        return false;
+    }
+};

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

@@ -0,0 +1,48 @@
+import partition from 'lodash/partition';
+import { partitionMulti } from './partitionMulti';
+import { isInternetExplorer } from './isInternetExplorer';
+
+describe(`partitionMulti`, () => {
+    it('should act like partition for single predicate', () => {
+        const data = [0, 1, 2, 3, 4, 5];
+        const isEven = (n: number): boolean => n % 2 === 0;
+
+        const expected = partition(data, isEven);
+        const actual = partitionMulti(data, [isEven]);
+
+        expect(actual).toEqual(expected);
+    });
+
+    it('should partition on multiple predicates', () => {
+        type T = string | number | boolean;
+        const data: T[] = ['a', 1, 'b', false, true];
+        const isString = (s: T): boolean => typeof s === 'string';
+        const isNumber = (s: T): boolean => typeof s === 'number';
+
+        const [strings, numbers, others] = partitionMulti(data, [isString, isNumber]);
+
+        expect(strings).toEqual(['a', 'b']);
+        expect(numbers).toEqual([1]);
+        expect(others).toEqual([false, true]);
+    });
+});
+
+describe(`isInternetExplorer`, () => {
+    it('should detect IE 10', () => {
+        const userAgentIE10 = `Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)`;
+        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentIE10, configurable: true });
+        expect(isInternetExplorer()).toEqual(true);
+    });
+
+    it('should detect IE 11', () => {
+        const userAgentIE11 = `Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko`;
+        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentIE11, configurable: true });
+        expect(isInternetExplorer()).toEqual(true);
+    });
+
+    it('should not detect IE', () => {
+        const userAgentFirefox = `Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0`;
+        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentFirefox, configurable: true });
+        expect(isInternetExplorer()).toEqual(false);
+    });
+});

package/jest/__mocks__/@storybook/addon-actions.js

@@ -0,0 +1,3 @@
+module.exports = {
+    action: (name) => (event) => console.log(name, event),
+};

package/jest/__mocks__/@storybook/addon-knobs.js

@@ -0,0 +1,6 @@
+module.exports = {
+    text: (name, defaultValue) => defaultValue,
+    number: (name, defaultValue) => defaultValue,
+    boolean: (name, defaultValue) => defaultValue,
+    select: (name, options, defaultValue) => defaultValue,
+};

package/jest/__mocks__/emptyFileMockTransformer.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/no-commonjs,import/unambiguous,import/no-nodejs-modules */
+const path = require('path');
+
+module.exports = {
+    process(src, filename) {
+        return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+    },
+};

package/jest/__mocks__/emptyModuleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/jest/configure.js

@@ -0,0 +1,6 @@
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+configure({ adapter: new Adapter() });
+
+import '@testing-library/jest-dom';

package/jest/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+const tsconfig = require('../../../tsconfig');
+const CONFIGS = require('../../../configs');
+
+const fromPairs = (pairs) => pairs.reduce((res, [key, value]) => ({ ...res, [key]: value }), {});
+
+const moduleNameMapper = fromPairs(
+    Object.entries(tsconfig.compilerOptions.paths).map(([k, [v]]) => [
+        `^${k.replace(/\/\*/, '(.*)')}$`,
+        `${CONFIGS.path.ROOT_PATH}/packages/${v.replace(/\/\*/, '$1')}`,
+    ]),
+);
+
+module.exports = {
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.tsx'],
+    coverageDirectory: '<rootDir>jest/reports/coverage',
+    coverageReporters: ['json', 'lcov', 'html', 'text'],
+    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+    moduleNameMapper: {
+        '\\.scss$': '<rootDir>jest/__mocks__/emptyModuleMock.js',
+        ...moduleNameMapper,
+    },
+    reporters: ['default'],
+    rootDir: '../',
+    setupFilesAfterEnv: [
+        '<rootDir>jest/configure.js',
+    ],
+    snapshotSerializers: ['enzyme-to-json/serializer'],
+    testEnvironment: 'jsdom',
+    testMatch: ['<rootDir>src/**/?(*.)+(spec|test).[jt]s?(x)'],
+    transform: {
+        '^.+\\.(t|j)sx?$': '<rootDir>jest/transform.js',
+        // Mock file import returning their file path.
+        '\\.(jpg|jpeg|png|gif)$': '<rootDir>jest/__mocks__/emptyFileMockTransformer.js',
+    },
+};

package/jest/transform.js

@@ -0,0 +1,6 @@
+const CONFIGS = require('../../../configs');
+
+module.exports = require('babel-jest').default.createTransformer({
+    plugins: CONFIGS.babel.plugins,
+    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/react', '@babel/preset-typescript'],
+});

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.7",
-        "@lumx/icons": "^3.0.7",
+        "@lumx/core": "^3.1.0",
+        "@lumx/icons": "^3.1.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -107,13 +107,11 @@
     "scripts": {
         "build": "rollup -c",
         "prepare": "install-peers || exit 0",
-        "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
         "storybook": "yarn start:storybook",
         "start:storybook": "cd storybook && ./start",
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.7",
-    "gitHead": "4fec43ef3290a9f250767d3bdecf60cfcf02ee75"
+    "version": "3.1.0"
 }

package/rollup.config.js

@@ -0,0 +1,98 @@
+import path from 'path';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import analyze from 'rollup-plugin-analyzer';
+import babel from 'rollup-plugin-babel';
+import cleaner from 'rollup-plugin-cleaner';
+import copy from 'rollup-plugin-copy';
+import dts from 'rollup-plugin-dts';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import tsPathsResolve from 'rollup-plugin-ts-paths-resolve';
+
+import pkg from './package.json';
+const CONFIGS = require('../../configs');
+
+const ROOT_PATH = path.resolve(__dirname, '..', '..');
+const DIST_PATH = path.resolve(__dirname, pkg.publishConfig.directory);
+export const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+/**
+ * List of entry modules that will get compiled and exported to NPM.
+ * All other modules are considered as internal and won't be exposed.
+ */
+const input = Object.fromEntries([
+    ['index', 'src/index.ts'],             // => @lumx/react
+    ['utils/index', 'src/utils/index.ts'], // => @lumx/react/utils
+]);
+
+// Bundle JS code
+const bundleJS = {
+    input,
+    output: {
+        format: 'esm',
+        sourcemap: true,
+        hoistTransitiveImports: false,
+        dir: DIST_PATH,
+        // Unnamed chunk moved to `_internal` folder
+        chunkFileNames: '_internal/[name].js',
+    },
+    plugins: [
+        /** Clean dist dir */
+        cleaner({ targets: [DIST_PATH] }),
+        /** Externalize peer dependencies. */
+        peerDepsExternal(),
+        /** Analyze created bundle. */
+        analyze(),
+        /** Resolve tsconfig paths. */
+        tsPathsResolve(),
+        /** Resolve source files. */
+        resolve({ browser: true, extensions }),
+        /** Resolve commonjs dependencies. */
+        commonjs({ include: /node_modules/ }),
+        /** Transpile JS/TS. */
+        babel({
+            extensions,
+            exclude: /node_modules/,
+            plugins: CONFIGS.babel.plugins,
+            presets: [
+                ['@babel/preset-env', { targets: 'defaults' }],
+                '@babel/preset-react',
+                '@babel/preset-typescript',
+            ],
+        }),
+        /** Copy additional files to dist. */
+        copy({
+            targets: [
+                { src: path.join(ROOT_PATH, 'CONTRIBUTING.md'), dest: DIST_PATH },
+                { src: path.join(ROOT_PATH, 'LICENSE.md'), dest: DIST_PATH },
+                { src: path.join(__dirname, 'README.md'), dest: DIST_PATH },
+                { src: path.join(__dirname, 'package.json'), dest: DIST_PATH },
+                {
+                    src: [path.join(__dirname, 'src'), '!**/*.snap', '!**/*.test.tsx', '!**/*.test.ts'],
+                    dest: DIST_PATH,
+                },
+            ],
+        }),
+    ],
+};
+
+// Bundle TS types in D.TS files
+const bundleType = {
+    input,
+    output: {
+        format: 'esm',
+        dir: DIST_PATH,
+        // Unnamed chunk moved to `_internal` folder
+        chunkFileNames: '_internal/[name].d.ts',
+    },
+    plugins: [
+        /** Externalize peer dependencies. */
+        peerDepsExternal(),
+        /** Resolve tsconfig paths. */
+        tsPathsResolve(),
+        /** Transform TS to D.TS file. */
+        dts({ respectExternal: true }),
+    ],
+};
+
+export default [bundleJS, bundleType];