@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/src/utils/disabled/useDisableStateProps.tsx

@@ -1,37 +0,0 @@
-import { useDisabledStateContext } from './DisabledStateContext';
-
-type GenericProps = {
-    disabled?: boolean;
-    isDisabled?: boolean;
-    'aria-disabled'?: boolean | 'true' | 'false';
-    onClick?: any;
-    onChange?: any;
-};
-
-interface Output<TProps extends GenericProps> {
-    /** Is disabled or aria-disabled */
-    isAnyDisabled?: boolean;
-    disabledStateProps: { disabled?: boolean; 'aria-disabled'?: boolean };
-    otherProps: TProps & { disabled: never; 'aria-disabled': never; isDisabled: never };
-}
-
-/**
- * Resolve disabled state from props.
- * (handles `disabled`, `isDisabled` and `aria-disabled`)
- *
- * @params component props
- */
-export function useDisableStateProps<TProps extends GenericProps>(props: TProps): Output<TProps> {
-    const { disabled, isDisabled = disabled, 'aria-disabled': ariaDisabled, onClick, onChange, ...otherProps } = props;
-    const disabledStateContext = useDisabledStateContext();
-    const disabledStateProps = {
-        disabled: disabledStateContext?.state === 'disabled' || isDisabled,
-        'aria-disabled': ariaDisabled === true || ariaDisabled === 'true',
-    };
-    const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
-    if (!isAnyDisabled) {
-        (otherProps as any).onClick = onClick;
-        (otherProps as any).onChange = onChange;
-    }
-    return { disabledStateProps, otherProps: otherProps as Output<TProps>['otherProps'], isAnyDisabled };
-}

package/src/utils/function/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/src/utils/index.ts

@@ -1,7 +0,0 @@
-/**
- * WARNING: All modules exported here are exposed to NPM in '@lumx/react/utils'.
- */
-
-export { ClickAwayProvider } from './ClickAwayProvider';
-export { Portal, type PortalProps, type PortalInit, PortalProvider, type PortalProviderProps } from './Portal';
-export { DisabledStateProvider, useDisabledStateContext } from './disabled';

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/react/OnBeforeUnmount.tsx

@@ -1,20 +0,0 @@
-import { 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/RawClickable.test.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { RawClickable, RawClickableProps } from './RawClickable';
-import { CustomLink } from '../../stories/utils/CustomLink';
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests.
- */
-const setup = (props: RawClickableProps<any>) => {
-    render(<RawClickable {...props} data-testid="raw-element" />);
-    const element = screen.getByTestId('raw-element');
-    return { props, element };
-};
-
-describe(`<RawClickable>`, () => {
-    describe('as a button', () => {
-        it('should render a button by default', () => {
-            const { element } = setup({ as: 'button', children: 'Click me' });
-            expect(element.tagName).toBe('BUTTON');
-            expect(element).toHaveAttribute('type', 'button');
-            expect(screen.getByRole('button', { name: 'Click me' })).toBe(element);
-        });
-
-        it('should trigger onClick', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'button', children: 'Click me', onClick });
-            await userEvent.click(element);
-            expect(onClick).toHaveBeenCalledTimes(1);
-        });
-
-        it('should be disabled with `disabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'button', children: 'Click me', onClick, disabled: true });
-            expect(element).toBeDisabled();
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should be disabled with `isDisabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'button', children: 'Click me', onClick, isDisabled: true });
-            expect(element).toBeDisabled();
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should be aria-disabled with `aria-disabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'button', children: 'Click me', onClick, 'aria-disabled': true });
-            expect(element).not.toBeDisabled();
-            expect(element).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('as a link', () => {
-        const href = 'https://example.com';
-
-        it('should render a link with `href` prop', () => {
-            const { element } = setup({ as: 'a', children: 'Click me', href });
-            expect(element.tagName).toBe('A');
-            expect(element).toHaveAttribute('href', href);
-            expect(screen.getByRole('link', { name: 'Click me' })).toBe(element);
-        });
-
-        it('should trigger onClick', async () => {
-            const onClick = vi.fn((evt: any) => evt.preventDefault());
-            const { element } = setup({ as: 'a', children: 'Click me', href, onClick });
-            await userEvent.click(element);
-            expect(onClick).toHaveBeenCalledTimes(1);
-        });
-
-        it('should be disabled with `disabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, disabled: true });
-            expect(element).toHaveAttribute('aria-disabled', 'true');
-            expect(element).toHaveAttribute('tabindex', '-1');
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should be disabled with `isDisabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, isDisabled: true });
-            expect(element).toHaveAttribute('aria-disabled', 'true');
-            expect(element).toHaveAttribute('tabindex', '-1');
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should be aria-disabled with `aria-disabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, 'aria-disabled': true });
-            expect(element).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('as a custom component', () => {
-        it('should render a custom component with `linkAs` prop', () => {
-            const { element } = setup({ as: CustomLink, children: 'Click me' });
-            expect(element).toHaveAttribute('data-custom-link');
-        });
-
-        it('should trigger onClick', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: CustomLink, children: 'Click me', onClick });
-            expect(element).toHaveAttribute('data-custom-link');
-            await userEvent.click(element);
-            expect(onClick).toHaveBeenCalledTimes(1);
-        });
-
-        it('should be disabled with `disabled` prop', async () => {
-            const onClick = vi.fn();
-            const { element } = setup({ as: CustomLink, children: 'Click me', onClick, disabled: true });
-            expect(element).toHaveAttribute('data-custom-link');
-            expect(element).toHaveAttribute('aria-disabled', 'true');
-            expect(element).toHaveAttribute('tabindex', '-1');
-            await userEvent.click(element);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('prop forwarding', () => {
-        it('should forward className', () => {
-            const { element } = setup({ as: 'button', className: 'foo bar' });
-            expect(element).toHaveClass('foo bar');
-        });
-
-        it('should forward ref and override type in button', () => {
-            const ref = React.createRef<HTMLButtonElement>();
-            const { element } = setup({ as: 'button', ref, type: 'submit' });
-            expect(element).toHaveAttribute('type', 'submit');
-            expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-        });
-
-        it('should forward ref and override tabindex in link', () => {
-            const ref = React.createRef<HTMLAnchorElement>();
-            const { element } = setup({ as: 'a', ref, href: '#', tabIndex: -1 });
-            expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-            expect(element).toHaveAttribute('tabindex', '-1');
-        });
-
-        it('should forward ref to custom component', () => {
-            const ref = React.createRef<HTMLAnchorElement>();
-            setup({ as: CustomLink, ref });
-            expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-        });
-    });
-});

package/src/utils/react/RawClickable.tsx

@@ -1,65 +0,0 @@
-import { AriaAttributes, ElementType } from 'react';
-import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
-import { ComponentRef, HasPolymorphicAs } from '@lumx/react/utils/type';
-import { HasRequiredLinkHref } from '@lumx/react/utils/type/HasRequiredLinkHref';
-
-type ClickableElement = 'a' | 'button' | ElementType;
-
-type BaseClickableProps<E extends ClickableElement> = {
-    children?: React.ReactNode;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    'aria-disabled'?: AriaAttributes['aria-disabled'];
-    onClick?: React.MouseEventHandler<E>;
-};
-
-export type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> &
-    HasRequiredLinkHref<E> &
-    BaseClickableProps<E>;
-
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-export const RawClickable = forwardRefPolymorphic(
-    <E extends ClickableElement>(props: RawClickableProps<E>, ref: ComponentRef<E>) => {
-        const {
-            children,
-            onClick,
-            disabled,
-            isDisabled = disabled,
-            'aria-disabled': ariaDisabled,
-            as,
-            ...forwardedProps
-        } = props;
-
-        const isAnyDisabled = isDisabled || ariaDisabled === 'true' || ariaDisabled === true;
-
-        const Component = as as any;
-        let clickableProps;
-        if (Component === 'button') {
-            clickableProps = { type: forwardedProps.type || 'button', disabled: isDisabled };
-        } else {
-            clickableProps = { tabIndex: isDisabled ? '-1' : forwardedProps.tabIndex };
-        }
-
-        return (
-            <Component
-                ref={ref}
-                aria-disabled={isAnyDisabled || undefined}
-                {...forwardedProps}
-                {...clickableProps}
-                onClick={(event: any) => {
-                    if (isAnyDisabled) {
-                        event.stopPropagation();
-                        event.preventDefault();
-                        return;
-                    }
-                    onClick?.(event);
-                }}
-            >
-                {children}
-            </Component>
-        );
-    },
-);

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/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 React from 'react';
-
-import { DOCUMENT } from '@lumx/react/constants';
-import type { Comp } from '@lumx/react/utils/type';
-/**
- * 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 { 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;
-    });
-}