@lumx/react 3.20.1-alpha.5 → 3.20.1-alpha.50

package/src/utils/locale/getCurrentLocale.ts

@@ -1,4 +0,0 @@
-/**
- * Get current browser locale.
- */
-export const getCurrentLocale = (): string => navigator.languages?.[0] || navigator.language;

package/src/utils/locale/parseLocale.test.ts

@@ -1,17 +0,0 @@
-import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
-
-describe(parseLocale.name, () => {
-    it('should parse various locale formats', () => {
-        expect(parseLocale('en')).toEqual({ code: 'en', language: 'en' });
-        expect(parseLocale('EN')).toEqual({ code: 'en', language: 'en' });
-        expect(parseLocale('en-US')).toEqual({ code: 'en-US', language: 'en', region: 'US' });
-        expect(parseLocale('en-us')).toEqual({ code: 'en-US', language: 'en', region: 'US' });
-        expect(parseLocale('en_us')).toEqual({ code: 'en-US', language: 'en', region: 'US' });
-        expect(parseLocale('EN-US')).toEqual({ code: 'en-US', language: 'en', region: 'US' });
-    });
-
-    it('should fail on invalid locale', () => {
-        expect(parseLocale('-')).toBe(undefined);
-        expect(parseLocale('-foo')).toBe(undefined);
-    });
-});

package/src/utils/locale/parseLocale.ts

@@ -1,23 +0,0 @@
-import { Locale } from '@lumx/react/utils/locale/types';
-
-/**
- * Parse locale code
- * @example
- *   parseLocale('EN') // => { code: 'en', language: 'en' }
- *   parseLocale('en_us') // => { code: 'en-US', language: 'en', region: 'US' }
- *   parseLocale('EN-US') // => { code: 'en-US', language: 'en', region: 'US' }
- */
-export function parseLocale(locale: string): Locale | undefined {
-    const [rawLanguage, rawRegion] = locale.split(/[-_]/);
-    if (!rawLanguage) {
-        return undefined;
-    }
-    const language = rawLanguage.toLowerCase();
-    let region: string | undefined;
-    let code = language;
-    if (rawRegion) {
-        region = rawRegion.toUpperCase();
-        code += `-${region}`;
-    }
-    return { code, region, language };
-}

package/src/utils/locale/types.ts

@@ -1,8 +0,0 @@
-export interface Locale {
-    /** ISO locale code `lang-REGION` (ex: `en-US`) */
-    code: string;
-    /** ISO locale language code (ex: `en`) */
-    language: string;
-    /** ISO locale region code (ex: `US`) */
-    region?: string;
-}

package/src/utils/number/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/src/utils/object/isEqual.test.ts

@@ -1,25 +0,0 @@
-import { isEqual } from './isEqual';
-
-test(isEqual.name, () => {
-    expect(isEqual('', '')).toBe(true);
-    expect(isEqual(0, 0)).toBe(true);
-    expect(isEqual(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)).toBe(true);
-
-    expect(isEqual('', 0)).toBe(false);
-
-    expect(isEqual({}, {})).toBe(true);
-    expect(isEqual({ a: 1 }, { a: 1 })).toBe(true);
-    expect(isEqual({ a: { a: 1 } }, { a: { a: 1 } })).toBe(true);
-
-    expect(isEqual([], [])).toBe(true);
-
-    expect(isEqual([1], [2])).toBe(false);
-    expect(isEqual([1], [1, 2])).toBe(false);
-    expect(isEqual([1, 2], [2, 1])).toBe(false);
-
-    expect(isEqual({ a: 1 }, { a: 2 })).toBe(false);
-    expect(isEqual({ a: 1 }, {})).toBe(false);
-    expect(isEqual({}, { a: 1 })).toBe(false);
-    expect(isEqual({ a: { a: 1 } }, { a: { a: 2 } })).toBe(false);
-    expect(isEqual({ a: 1 }, { a: 1, b: 1 })).toBe(false);
-});

package/src/utils/object/isEqual.ts

@@ -1,11 +0,0 @@
-/** Minimal recursive deep equal of JS values */
-export function isEqual(obj1: any, obj2: any): boolean {
-    if (obj1 === obj2) return true;
-    if (typeof obj1 === 'object' && typeof obj2 === 'object') {
-        const keys1 = Object.keys(obj1);
-        const keys2 = Object.keys(obj2);
-        if (keys1.length !== keys2.length) return false;
-        return keys1.every((key1) => isEqual(obj1[key1], obj2[key1]));
-    }
-    return false;
-}

package/src/utils/partitionMulti.test.ts

@@ -1,27 +0,0 @@
-import partition from 'lodash/partition';
-import { partitionMulti } from './partitionMulti';
-
-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]);
-    });
-});

package/src/utils/partitionMulti.ts

@@ -1,29 +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 '@lumx/core/js/types';
-
-/**
- * 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/src/utils/react/OnBeforeUnmount.tsx

@@ -1,20 +0,0 @@
-import React, { useLayoutEffect } from 'react';
-
-/**
- * Helper component using useLayoutEffect to trigger a callback on before unmount.
- *
- * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
- */
-export const OnBeforeUnmount = ({ callbackRef }: { callbackRef: React.RefObject<(() => void) | undefined> }) => {
-    useLayoutEffect(
-        () => {
-            return () => {
-                // On unmount
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                callbackRef.current?.();
-            };
-        }, // eslint-disable-next-line react-hooks/exhaustive-deps
-        [],
-    );
-    return null;
-};

package/src/utils/react/flattenChildren.ts

@@ -1,32 +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.
- * @deprecated This function was used to develop keyboard navigation in the List component,
- *    but we will replace this with a better method that does not require to hack the children inspection
- *
- * TODO: remove List keyboard navigation once we have provided alternative component (Menu, Combobox, etc.),
- *       remove this function and then remove react-is from the dependencies
- */
-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/src/utils/react/forwardRef.ts

@@ -1,11 +0,0 @@
-import React, { type ReactNode, type ForwardedRef } from 'react';
-import type { Comp } from '../type';
-
-type ForwardRef = <P, T = HTMLElement, A = unknown>(
-    render: (props: P, ref: ForwardedRef<T>) => ReactNode,
-) => Comp<P, T> & A;
-
-/**
- * React.forwardRef but re-typed to attach some custom metadata on our components.
- */
-export const forwardRef = React.forwardRef as ForwardRef;

package/src/utils/react/forwardRefPolymorphic.ts

@@ -1,9 +0,0 @@
-import React, { type ElementType } from 'react';
-import type { ComponentRef } from '@lumx/react/utils/type';
-
-type ForwardRefPolymorphic = <E extends ElementType, P extends { as?: E }>(
-    render: (props: P, ref: ComponentRef<E>) => React.ReactNode,
-) => (props: P & React.ComponentProps<E> & { ref?: ComponentRef<E> }) => React.JSX.Element;
-
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-export const forwardRefPolymorphic = React.forwardRef as ForwardRefPolymorphic;

package/src/utils/react/mergeRefs.ts

@@ -1,33 +0,0 @@
-import { Falsy } from '@lumx/react/utils/type';
-import { MutableRefObject, useMemo } 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;
-            }
-        });
-}
-
-/**
- * Same as `mergeRefs` but memoized
- */
-export const useMergeRefs = <T>(...refs: Array<MutableRefObject<T | null> | FnRef<T> | Falsy>) => {
-    return useMemo(
-        () => mergeRefs(...refs),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        refs,
-    );
-};

package/src/utils/react/renderButtonOrLink.tsx

@@ -1,16 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { renderLink } from './renderLink';
-
-interface Props {
-    linkAs?: any;
-    href?: any;
-}
-
-/**
- * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
- */
-export const renderButtonOrLink = <P extends Props>(props: P, ...children: ReactNode[]): ReactElement => {
-    const { linkAs, href, ...forwardedProps } = props;
-    if (linkAs || href) return renderLink(props, ...children);
-    return React.createElement('button', { type: 'button', ...forwardedProps }, ...children);
-};

package/src/utils/react/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/src/utils/react/skipRender.tsx

@@ -1,18 +0,0 @@
-import { DOCUMENT } from '@lumx/react/constants';
-import type { Comp } from '@lumx/react/utils/type';
-import React from 'react';
-
-/**
- * HOC component wrapping a component to skip render if predicate return falsy
- */
-export const skipRender = <P, T>(predicate: (props: P) => any, Component: Comp<P, T>) => {
-    const Wrapper = React.forwardRef<T, P>((props, ref) => {
-        if (!DOCUMENT) {
-            // Can't render in SSR.
-            return null;
-        }
-        return <Component ref={ref} {...props} />;
-    });
-    Wrapper.displayName = Component.displayName;
-    return Wrapper;
-};

package/src/utils/react/unref.ts

@@ -1,7 +0,0 @@
-import { MaybeElementOrRef } from '@lumx/react/utils/type';
-
-/** Unref a react ref or element */
-export function unref(maybeElement: MaybeElementOrRef<HTMLElement>) {
-    if (maybeElement instanceof HTMLElement) return maybeElement;
-    return maybeElement?.current;
-}

package/src/utils/react/wrapChildrenIconWithSpaces.test.tsx

@@ -1,37 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { Icon } from '@lumx/react';
-import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';
-import { wrapChildrenIconWithSpaces } from './wrapChildrenIconWithSpaces';
-
-describe(wrapChildrenIconWithSpaces, () => {
-    it('should ignore null or undefined children', () => {
-        expect(wrapChildrenIconWithSpaces(undefined)).toBeUndefined();
-        expect(wrapChildrenIconWithSpaces(null)).toBeUndefined();
-    });
-
-    it('should wrap icons with spaces', () => {
-        expect(
-            wrapChildrenIconWithSpaces(
-                <>
-                    <Icon icon={mdiEarth} />a string
-                    <>
-                        some more string with
-                        <Icon icon={mdiFoodApple} />
-                    </>
-                    {['array with', <Icon key="custom-key" icon={mdiPencil} />]}
-                </>,
-            ),
-        ).toEqual([
-            // prettier-ignore
-            <Fragment key=".0">
-                {' '}
-                <Icon key=".0" icon={mdiEarth} />{' '}a string
-                <Fragment key=".2">
-                    some more string with{' '}<Icon key=".1" icon={mdiFoodApple} />{' '}
-                </Fragment>
-                array with{' '}<Icon key=".3:$custom-key" icon={mdiPencil} />{' '}
-            </Fragment>,
-        ]);
-    });
-});

package/src/utils/react/wrapChildrenIconWithSpaces.tsx

@@ -1,22 +0,0 @@
-import React, { Children } from 'react';
-import { isComponentType } from '@lumx/react/utils/type';
-import { Icon } from '@lumx/react';
-
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-export function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {
-    if (children === null || children === undefined) return undefined;
-    return Children.toArray(children).flatMap((child) => {
-        if (isComponentType(Icon)(child)) {
-            return [' ', child, ' '];
-        }
-        if (
-            React.isValidElement(child) &&
-            child.props &&
-            typeof child.props === 'object' &&
-            'children' in child.props
-        ) {
-            return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
-        }
-        return child;
-    });
-}

package/src/utils/theme/ThemeContext.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { Theme } from '@lumx/react';
-
-type ThemeContextValue = Theme | undefined;
-export const ThemeContext = React.createContext<ThemeContextValue>(undefined);
-
-/** Provide a theme context to all children. */
-export const ThemeProvider = ThemeContext.Provider as React.FC<{
-    value: ThemeContextValue;
-    children?: React.ReactNode;
-}>;
-
-/** Get the theme in the current context. */
-export function useTheme(): ThemeContextValue {
-    return React.useContext(ThemeContext);
-}

package/src/utils/theme/invertTheme.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@lumx/react';
-
-/** Invert the color of the given theme. */
-export const invertTheme = (theme: Theme): Theme => (theme === 'light' ? 'dark' : 'light');

package/src/utils/type/Comp.ts

@@ -1,14 +0,0 @@
-import type { ReactElement, Ref } from 'react';
-
-/** 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;
-};

package/src/utils/type/ComponentRef.ts

@@ -1,16 +0,0 @@
-import type React from 'react';
-import type { Comp } from './Comp';
-
-/**
- * Extract ref type for a component or JSX intrinsic element
- *
- * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
- * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
- */
-export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[C]['ref']
-    : C extends Comp<any, infer T>
-      ? React.Ref<T>
-      : C extends React.JSXElementConstructor<{ ref?: infer R }>
-        ? R
-        : never;

package/src/utils/type/HasAriaDisabled.ts

@@ -1,6 +0,0 @@
-import type { AriaAttributes } from 'react';
-
-export interface HasAriaDisabled {
-    /** Similar to `disabled` but does not block pointer events or focus */
-    'aria-disabled'?: AriaAttributes['aria-disabled'];
-}

package/src/utils/type/HasPolymorphicAs.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
-    /**
-     * Customize the rendered component.
-     */
-    as?: E;
-};

package/src/utils/type/MaybeElementOrRef.ts

@@ -1,6 +0,0 @@
-import type React from 'react';
-
-/**
- * Maybe a HTMLElement or a React ref of a HTMLElement
- */
-export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;

package/src/utils/type/index.ts

@@ -1,8 +0,0 @@
-export type * from '@lumx/core/js/types';
-
-export type { Comp } from './Comp';
-export type { ComponentRef } from './ComponentRef';
-export type { HasPolymorphicAs } from './HasPolymorphicAs';
-export { isComponent } from './isComponent';
-export { isComponentType } from './isComponentType';
-export type { MaybeElementOrRef } from './MaybeElementOrRef';

package/src/utils/type/isComponent.ts

@@ -1,33 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import get from 'lodash/get';
-import type { Comp } from './Comp';
-
-/**
- * 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',
-];
-/**
- * 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)
-        );
-    };

package/src/utils/type/isComponentType.ts

@@ -1,9 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-/**
- * 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;