@lumx/react 3.20.1-alpha.3 → 3.20.1-alpha.4

package/src/components/table/TableCell.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
@@ -40,7 +42,7 @@ describe(`<${TableCell.displayName}>`, () => {
 
     it('should render header variant clickable', async () => {
         const content = 'Content';
-        const onHeaderClick = vi.fn();
+        const onHeaderClick = jest.fn();
         const { tableCell } = setup({ children: content, variant: 'head', onHeaderClick });
 
         const headerButton = within(tableCell).getByRole('button', { name: content });

package/src/components/table/TableCell.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';

package/src/components/table/TableHeader.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/table/TableRow.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/tabs/Tab.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/tabs/TabList.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Tab } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/tabs/TabProvider.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Tab, TabList, TabPanel, TabProvider, TabProviderProps } from '@lumx/react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

package/src/components/tabs/TabProvider.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import { ReactNode, useEffect, useReducer } from 'react';
+import React, { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from './state';
 
 export interface TabProviderProps {

package/src/components/tabs/Tabs.stories.tsx

@@ -8,7 +8,7 @@ import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
 import { withCategory } from '@lumx/react/stories/utils/withCategory';
 import get from 'lodash/get';
 import times from 'lodash/times';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default {
     title: 'LumX components/tabs',

package/src/components/text/Text.stories.tsx

@@ -1,6 +1,6 @@
+import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import React from 'react';
 
-import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';

package/src/components/text/Text.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';

package/src/components/text/Text.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';

package/src/components/text-field/TextField.test.tsx

@@ -1,4 +1,5 @@
-import { Mock } from 'vitest';
+import React from 'react';
+
 import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
@@ -19,7 +20,7 @@ import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
 
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -48,7 +49,7 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRe
 };
 
 describe(`<${TextField.displayName}>`, () => {
-    (isFocusVisible as Mock).mockReturnValue(false);
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
 
     describe('Render', () => {
         it('should render defaults', () => {
@@ -179,7 +180,7 @@ describe(`<${TextField.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onChange` when text field is changed', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { inputNative } = setup({ value: '', name: 'name', onChange });
 
             await userEvent.tab();
@@ -191,7 +192,7 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should trigger `onChange` with empty value when text field is cleared', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { clearButton } = setup({
                 value: 'initial value',
                 name: 'name',
@@ -207,8 +208,8 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should trigger `onChange` with empty value and `onClear` when text field is cleared', async () => {
-            const onChange = vi.fn();
-            const onClear = vi.fn();
+            const onChange = jest.fn();
+            const onClear = jest.fn();
             const { clearButton } = setup({
                 value: 'initial value',
                 name: 'name',
@@ -228,7 +229,7 @@ describe(`<${TextField.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render with "isDisabled"', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { element, inputNative } = setup({
                 label: 'Label',
                 isDisabled: true,
@@ -254,7 +255,7 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should render with "aria-disabled"', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { element, inputNative } = setup({
                 label: 'Label',
                 'aria-disabled': true,

package/src/components/text-field/TextField.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -1,7 +1,9 @@
+import React from 'react';
+
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
@@ -26,20 +28,9 @@ describe(`<${Thumbnail.displayName}>`, () => {
         },
     });
 
-    describe('clickable button', () => {
-        it('should render clickable button', async () => {
-            const onClick = vi.fn();
-            const { thumbnail } = setup({ onClick, alt: 'Name' });
-            const button = screen.getByRole('button', { name: 'Name' });
-            expect(button).toBe(thumbnail);
-            expect(button).toHaveAttribute('type', 'button');
-
-            fireEvent.click(thumbnail as HTMLElement);
-            expect(onClick).toHaveBeenCalled();
-        });
-
-        it('should not render button in disabled context', () => {
-            const onClick = vi.fn();
+    describe('disabled state', () => {
+        it('should not be clickable when disabled from context', () => {
+            const onClick = jest.fn();
             const { thumbnail, container } = setup(
                 { onClick, 'aria-label': 'thumbnail' },
                 {
@@ -56,21 +47,8 @@ describe(`<${Thumbnail.displayName}>`, () => {
             fireEvent.click(thumbnail as HTMLElement);
             expect(onClick).not.toHaveBeenCalled();
         });
-    });
-
-    describe('clickable link', () => {
-        it('should render clickable link', async () => {
-            const onClick = vi.fn((evt: any) => evt.preventDefault());
-            const { thumbnail } = setup({ linkProps: { href: '#' }, onClick, alt: 'Name' });
-            const link = screen.getByRole('link');
-            expect(link).toBe(thumbnail);
-            expect(link).toHaveAttribute('href', '#');
-
-            fireEvent.click(thumbnail as HTMLElement);
-            expect(onClick).toHaveBeenCalled();
-        });
 
-        it('should not render link in disabled context', () => {
+        it('should have no href when disabled from context', () => {
             const { container, thumbnail } = setup(
                 { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
                 {

package/src/components/thumbnail/Thumbnail.tsx

@@ -22,7 +22,6 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -101,7 +100,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
-    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -152,17 +151,18 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
     }
 
     const isLink = Boolean(linkProps?.href || linkAs);
-    const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+    const isButton = !!forwardedProps.onClick;
+    const isClickable = !isAnyDisabled && (isButton || isLink);
 
-    const Wrapper: any = isClickable ? RawClickable : 'div';
+    let Wrapper: any = 'div';
     const wrapperProps = { ...forwardedProps };
-    if (isClickable) {
-        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);
-        if (isLink) {
-            Object.assign(wrapperProps, linkProps);
-        } else {
-            wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
-        }
+    if (!isAnyDisabled && isLink) {
+        Wrapper = linkAs || 'a';
+        Object.assign(wrapperProps, linkProps);
+    } else if (!isAnyDisabled && isButton) {
+        Wrapper = 'button';
+        wrapperProps.type = forwardedProps.type || 'button';
+        wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 
     // If we have a loading placeholder image that is really loaded (complete)

package/src/components/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
-
 import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
+import React, { useState } from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
 import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { MockInstance } from 'vitest';
 import { Button } from '@lumx/react';
 import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -13,18 +12,13 @@ import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
 
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
+jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 // Skip delays
-vi.mock('@lumx/react/constants', async (importActual) => {
-    const actual = (await importActual()) as Record<string, any>;
-    return {
-        ...actual,
-        TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
-        VISUALLY_HIDDEN: actual.VISUALLY_HIDDEN,
-        CSS_PREFIX: actual.CSS_PREFIX,
-    };
-});
+jest.mock('@lumx/react/constants', () => ({
+    ...jest.requireActual('@lumx/react/constants'),
+    TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
+}));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -352,7 +346,7 @@ describe(`<${Tooltip.displayName}>`, () => {
         });
 
         it('should activate on anchor focus visible and close on escape', async () => {
-            (isFocusVisible as unknown as MockInstance).mockReturnValue(true);
+            (isFocusVisible as jest.Mock).mockReturnValue(true);
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,
@@ -387,7 +381,7 @@ describe(`<${Tooltip.displayName}>`, () => {
         });
 
         it('should not activate on anchor focus if not visible', async () => {
-            (isFocusVisible as unknown as MockInstance).mockReturnValue(false);
+            (isFocusVisible as jest.Mock).mockReturnValue(false);
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,

package/src/components/uploader/Uploader.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';
@@ -87,9 +89,9 @@ describe(`<${Uploader.displayName}>`, () => {
         ${'button'}               | ${{}}
         ${'button isDisabled   '} | ${{ isDisabled: true }}
         ${'button aria-disabled'} | ${{ 'aria-disabled': true }}
-        ${'file input          '} | ${{ fileInputProps: { onChange: vi.fn() } }}
+        ${'file input          '} | ${{ fileInputProps: { onChange: jest.fn() } }}
     `('Events $name', ({ props }) => {
-        const onClick = vi.fn();
+        const onClick = jest.fn();
         beforeEach(() => onClick.mockClear());
         const assertClick = () => {
             if (props.isDisabled || props['aria-disabled']) {

package/src/components/user-block/UserBlock.stories.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+
 import { mdiMenuDown, mdiStar } from '@lumx/icons';
 import { Badge, ColorPalette, Icon, IconButton, Link, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';

package/src/components/user-block/UserBlock.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -34,7 +36,7 @@ describe(`<${UserBlock.displayName}>`, () => {
         });
 
         it('should render button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { name, thumbnail } = setup({
                 onClick,
                 name: 'John Doe',

package/src/hooks/useId.test.tsx

@@ -1,5 +1,6 @@
 import { useId } from '@lumx/react/hooks/useId';
 import { render } from '@testing-library/react';
+import React from 'react';
 
 function setup() {
     const Component = (): any => useId();

package/src/hooks/useInfiniteScroll.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 type useInfiniteScrollType = (
     ref: React.RefObject<HTMLElement>,

package/src/hooks/usePreviousValue.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 /**
  * Returns the value from the previous render.
  */

package/src/stories/decorators/withChromaticForceScreenSize.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
 
 /** Story decorator used to force a minimum screen size when running in chromatic */

package/src/stories/decorators/withNestedProps.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import set from 'lodash/set';
 
 /**

package/src/stories/decorators/withThemedBackground.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const LIGHT_BACKGROUND_COLOR = '#EEE';
 const DARK_BACKGROUND_COLOR = '#333';
 

package/src/stories/decorators/withWrapper.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * SB decorator adding a wrapping div around the story
  */

package/src/stories/utils/CustomLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 /**
  * Example custom link that can be used in linkAs props.
  */

package/src/testing/utils/ThemeSentinel.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 const TEST_ID = 'theme-sentinel';

package/src/untypped-modules.d.ts

@@ -1,7 +1,3 @@
-// Extend CSSStyleDeclaration to support viewTransitionName for view transitions
-interface CSSStyleDeclaration {
-    viewTransitionName: string | null;
-}
 /**
  * List untypped modules here to declare them as explicit any.
  */

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Button } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
 interface ContextValue {

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Switch } from '@lumx/react/components/switch';
 import { Alignment } from '@lumx/react';
 

package/src/utils/Portal/Portal.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Portal } from './Portal';
 

package/src/utils/Portal/PortalProvider.stories.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button } from '@lumx/react';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
 import { PortalProvider } from './PortalProvider';

package/src/utils/Portal/PortalProvider.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PortalInit, PortalProvider } from './PortalProvider';
 import { Portal } from './Portal';
@@ -29,7 +30,7 @@ describe('PortalProvider', () => {
     });
 
     it('should call teardown on unmount', () => {
-        const teardownMock = vi.fn();
+        const teardownMock = jest.fn();
         const portalContainer = document.createElement('div');
         portalContainer.id = PORTAL_CONTAINER_ID;
         document.body.appendChild(portalContainer);

package/src/utils/date/getYearDisplayName.test.ts

@@ -4,7 +4,7 @@ describe(getYearDisplayName, () => {
     beforeEach(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        vi.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
+        jest.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
             resolvedOptions: () => ({
                 fallback: 'code',
                 locale: 'fr',

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     Button,
     Checkbox,

package/src/utils/disabled/useDisableStateProps.test.tsx

@@ -59,14 +59,14 @@ describe(useDisableStateProps.name, () => {
     });
 
     it('should forward onClick when not disabled', () => {
-        const onClick = vi.fn();
+        const onClick = jest.fn();
         const { element } = setup({ onClick });
         fireEvent.click(element);
         expect(onClick).toHaveBeenCalled();
     });
 
     it('should not forward onClick when disabled', () => {
-        const onClick = vi.fn();
+        const onClick = jest.fn();
         const { element } = setup({ disabled: true, onClick });
         fireEvent.click(element);
         expect(onClick).not.toHaveBeenCalled();

package/src/utils/react/OnBeforeUnmount.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 /**
  * Helper component using useLayoutEffect to trigger a callback on before unmount.

package/src/utils/react/renderButtonOrLink.tsx

@@ -0,0 +1,16 @@
+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/skipRender.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-
 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
  */

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '@lumx/react';
 import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';

package/src/utils/type/HasPolymorphicAs.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
     /**
      * Customize the rendered component.