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

package/src/components/input-helper/InputHelper.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Kind, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/input-helper/InputHelper.tsx

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

package/src/components/input-label/InputLabel.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Typography } from '@lumx/react';
 
 import { InputLabel } from './InputLabel';

package/src/components/input-label/InputLabel.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Theme, Typography } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { getTypographyClassName } from '@lumx/core/js/utils/className';

package/src/components/input-label/InputLabel.tsx

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

package/src/components/lightbox/Lightbox.test.tsx

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

package/src/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/link/Link.stories.tsx

@@ -10,6 +10,7 @@ import {
     TypographyTitleCustom,
     GenericBlock,
 } from '@lumx/react';
+import React from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { iconArgType } from '@lumx/react/stories/controls/icons';

package/src/components/link/Link.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -49,7 +51,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render a button', () => {
             const name = 'Link';
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ onClick, children: name });
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
@@ -73,7 +75,7 @@ describe(`<${Link.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
@@ -81,28 +83,25 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            expect(screen.queryByRole('link')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled');
-            // Simulate standard disabled state (not focusable)
-            expect(link).toHaveAttribute('tabindex', '-1');
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(screen.queryByRole('button')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            expect(link).not.toHaveAttribute('tabindex');
+            expect(link).toHaveAttribute('aria-disabled');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,
@@ -110,7 +109,8 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            expect(screen.queryByRole('link')).toBeInTheDocument();
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';
@@ -10,9 +12,8 @@ import {
 } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
-import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -66,26 +67,38 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
+        href,
         leftIcon,
+        linkAs,
         rightIcon,
+        target,
         typography,
-        linkAs,
         ...forwardedProps
     } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
+    const isLink = linkAs || href;
+    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
+    const baseProps: React.ComponentProps<typeof Component> = {};
+    if (Component === 'button') {
+        baseProps.type = 'button';
+        Object.assign(baseProps, disabledStateProps);
+    } else if (isLink) {
+        baseProps.href = href;
+        baseProps.target = target;
+    }
+
     return (
-        <RawClickable
-            ref={ref as any}
-            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
+        <Component
+            ref={ref}
             {...forwardedProps}
-            {...disabledStateProps}
+            {...baseProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -99,7 +112,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </RawClickable>
+        </Component>
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/link-preview/LinkPreview.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { Size, Theme } from '@lumx/core/js/constants';
 import { Thumbnail } from '@lumx/react';

package/src/components/link-preview/LinkPreview.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import {

package/src/components/list/List.stories.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 
 import { mdiAccount, mdiOpenInNew } from '@lumx/icons';
 import { Icon, ListDivider, ListProps, ListSubheader, Size } from '@lumx/react';

package/src/components/list/List.test.tsx

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

package/src/components/list/List.tsx

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

package/src/components/list/ListDivider.test.tsx

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

package/src/components/list/ListDivider.tsx

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

package/src/components/list/ListItem.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';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -27,7 +29,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: vi.fn() });
+            setup({ children: 'Label', onItemSelected: jest.fn() });
             expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
         });
 
@@ -39,7 +41,7 @@ describe(`<${ListItem.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled list item button', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
@@ -48,7 +50,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render disabled list item link', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 isDisabled: true,
@@ -62,7 +64,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item button', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
@@ -70,7 +72,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item link', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/list/ListItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';

package/src/components/list/ListSubheader.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/list/ListSubheader.tsx

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

package/src/components/message/Message.test.tsx

@@ -1,6 +1,7 @@
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
 
+import React from 'react';
 import { queryByRole, render } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { mdiAbTesting } from '@lumx/icons';
@@ -53,7 +54,7 @@ describe(`<${Message.displayName}>`, () => {
         });
 
         it('should render close button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { closeButton } = setup({
                 hasBackground: true,
                 kind: 'info',

package/src/components/message/Message.tsx

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

package/src/components/mosaic/Mosaic.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -30,7 +32,7 @@ describe(`<${Mosaic.displayName}>`, () => {
         expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
         expect(thumbnails.length).toBe(count);
         for (const thumbnail of thumbnails) {
-            expect(within(thumbnail).queryByAltText('')).toBeInTheDocument();
+            expect(within(thumbnail).queryByRole('img')).toBeInTheDocument();
         }
     });
 
@@ -45,8 +47,8 @@ describe(`<${Mosaic.displayName}>`, () => {
     });
 
     it('should render clickable', async () => {
-        const onClick = vi.fn();
-        const onImageClick = vi.fn();
+        const onClick = jest.fn();
+        const onImageClick = jest.fn();
         const { thumbnails } = setup({
             thumbnails: generateThumbnails(6),
             onImageClick,

package/src/components/mosaic/Mosaic.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useMemo } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
 import classNames from 'classnames';
 import take from 'lodash/take';

package/src/components/navigation/Navigation.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     mdiHome,
     mdiMessageTextOutline,

package/src/components/navigation/Navigation.test.tsx

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

package/src/components/navigation/Navigation.tsx

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

package/src/components/navigation/NavigationItem.test.tsx

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

package/src/components/navigation/NavigationItem.tsx

@@ -1,12 +1,11 @@
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -17,6 +16,9 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
+/** Make `href` required when `as` is `a` */
+type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
+
 /**
  * Navigation item props
  */
@@ -24,7 +26,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    HasRequiredLinkHref<E>;
+    RequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -42,6 +44,8 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
+        const buttonProps = Element === 'button' ? { type: 'button' } : {};
+
         return (
             <li
                 className={classNames(
@@ -53,14 +57,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <RawClickable
-                        as={Element}
+                    <Element
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
+                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -70,7 +74,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </RawClickable>
+                    </Element>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.test.tsx

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

package/src/components/navigation/NavigationSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useContext } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
@@ -9,7 +9,6 @@ import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -53,8 +52,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <RawClickable<'button'>
-                as="button"
+            <button
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -64,6 +62,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
+                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -74,7 +73,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </RawClickable>
+            </button>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

package/src/components/notification/Notification.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Kind } from '@lumx/react';
 import { render, within, screen } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -42,8 +44,8 @@ describe(`<${Notification.displayName}>`, () => {
     });
 
     it('should render content & action', async () => {
-        const onClick = vi.fn();
-        const onActionClick = vi.fn();
+        const onClick = jest.fn();
+        const onActionClick = jest.fn();
         const content = 'Content';
         const actionLabel = 'actionLabel';
         const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
@@ -79,9 +81,8 @@ describe(`<${Notification.displayName}>`, () => {
 
     it('should forward styles', () => {
         const { notification } = setup({ style: { color: 'red' } });
-
         expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
+        expect(notification).toHaveStyle('color: red');
     });
 
     // Common tests suite.

package/src/components/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';

package/src/components/popover/Popover.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';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';

package/src/components/popover/Popover.tsx

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

package/src/components/popover/usePopoverStyle.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -5,7 +6,7 @@ import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 describe(`<${PopoverDialog.displayName}>`, () => {
     it('should open and init focus', async () => {

package/src/components/popover-dialog/PopoverDialog.tsx

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

package/src/components/post-block/PostBlock.test.tsx

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

package/src/components/post-block/PostBlock.tsx

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

package/src/components/progress/Progress.tsx

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

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';

package/src/components/progress/ProgressCircular.test.tsx

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