@lumx/react 3.0.7-alpha.2 → 3.0.7-alpha.4

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

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

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

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

package/dist/src/utils/isInternetExplorer.ts

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

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

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

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

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

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

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

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

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

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

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

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

package/jest/__mocks__/emptyFileMockTransformer.js

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

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

package/jest/configure.js

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

package/jest/index.js

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

@@ -1,6 +0,0 @@
-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/rollup.config.js

@@ -1,98 +0,0 @@
-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];

package/storybook/build

@@ -1,4 +0,0 @@
-#!/bin/sh
-
-yarn install
-yarn build "$@"