@lumx/react 3.21.1 → 3.21.2-alpha.1

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/HasRequiredLinkHref.ts

@@ -1 +0,0 @@
-export type HasRequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;

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,9 +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';
-export type { HasRequiredLinkHref } from './HasRequiredLinkHref';

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;