@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/utils/disabled/useDisableStateProps.tsx

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+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/{_internal/partitionMulti-4daccdd5.js → src/utils/partitionMulti.ts}

@@ -4,6 +4,8 @@ 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.
  *
@@ -17,9 +19,11 @@ import reduce from 'lodash/reduce';
  * @param  predicates array of predicates to apply on elements
  * @return partitioned elements by the given predicates
  */
-function partitionMulti(elements, predicates) {
-  return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
+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],
+    );
 }
-
-export { partitionMulti as p };
-//# sourceMappingURL=partitionMulti-4daccdd5.js.map

package/src/utils/react/OnBeforeUnmount.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+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>,
+        ]);
+    });
+});