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

package/src/components/inline-list/InlineList.tsx

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

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

@@ -1,5 +1,3 @@
-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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

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

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

@@ -1,5 +1,3 @@
-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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,5 +1,3 @@
-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 React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -10,7 +10,6 @@ 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,5 +1,3 @@
-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';
@@ -51,7 +49,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render a button', () => {
             const name = 'Link';
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ onClick, children: name });
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
@@ -75,7 +73,7 @@ describe(`<${Link.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
@@ -83,25 +81,28 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(link).toHaveAttribute('disabled');
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled');
+            // Simulate standard disabled state (not focusable)
+            expect(link).toHaveAttribute('tabindex', '-1');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(link).toHaveAttribute('aria-disabled');
+            expect(screen.queryByRole('button')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            expect(link).not.toHaveAttribute('tabindex');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,
@@ -109,8 +110,7 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/link/Link.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';
@@ -12,8 +10,9 @@ 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>;
 
@@ -67,38 +66,26 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { 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 (
-        <Component
-            ref={ref}
+        <RawClickable
+            ref={ref as any}
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
             {...forwardedProps}
-            {...baseProps}
+            {...disabledStateProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -112,7 +99,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </Component>
+        </RawClickable>
     );
 });
 Link.displayName = COMPONENT_NAME;

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

@@ -1,5 +1,3 @@
-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,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import {

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { 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,5 +1,3 @@
-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 React, { Key, ReactNode, SyntheticEvent, useRef } from 'react';
+import { Key, ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,5 +1,3 @@
-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,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

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

@@ -1,5 +1,3 @@
-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';
@@ -29,7 +27,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: jest.fn() });
+            setup({ children: 'Label', onItemSelected: vi.fn() });
             expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
         });
 
@@ -41,7 +39,7 @@ describe(`<${ListItem.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.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.
@@ -50,7 +48,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 isDisabled: true,
@@ -64,7 +62,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
@@ -72,7 +70,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/list/ListItem.tsx

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

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

@@ -1,5 +1,3 @@
-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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,7 +1,6 @@
 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';
@@ -54,7 +53,7 @@ describe(`<${Message.displayName}>`, () => {
         });
 
         it('should render close button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { closeButton } = setup({
                 hasBackground: true,
                 kind: 'info',

package/src/components/message/Message.tsx

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

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

@@ -1,5 +1,3 @@
-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';
@@ -32,7 +30,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).queryByRole('img')).toBeInTheDocument();
+            expect(within(thumbnail).queryByAltText('')).toBeInTheDocument();
         }
     });
 
@@ -47,8 +45,8 @@ describe(`<${Mosaic.displayName}>`, () => {
     });
 
     it('should render clickable', async () => {
-        const onClick = jest.fn();
-        const onImageClick = jest.fn();
+        const onClick = vi.fn();
+        const onImageClick = vi.fn();
         const { thumbnails } = setup({
             thumbnails: generateThumbnails(6),
             onImageClick,

package/src/components/mosaic/Mosaic.tsx

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

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

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

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

@@ -1,5 +1,3 @@
-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,5 +1,3 @@
-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,5 +1,3 @@
-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,11 +1,12 @@
-import React, { ElementType, ReactNode } from 'react';
+import { 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, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, 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). */
@@ -16,9 +17,6 @@ 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
  */
@@ -26,7 +24,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    RequiredLinkHref<E>;
+    HasRequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -44,8 +42,6 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
-        const buttonProps = Element === 'button' ? { type: 'button' } : {};
-
         return (
             <li
                 className={classNames(
@@ -57,14 +53,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <Element
+                    <RawClickable
+                        as={Element}
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
-                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -74,7 +70,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </Element>
+                    </RawClickable>
                 </Tooltip>
             </li>
         );

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

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

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

@@ -1,5 +1,3 @@
-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';
@@ -44,8 +42,8 @@ describe(`<${Notification.displayName}>`, () => {
     });
 
     it('should render content & action', async () => {
-        const onClick = jest.fn();
-        const onActionClick = jest.fn();
+        const onClick = vi.fn();
+        const onActionClick = vi.fn();
         const content = 'Content';
         const actionLabel = 'actionLabel';
         const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
@@ -81,8 +79,9 @@ describe(`<${Notification.displayName}>`, () => {
 
     it('should forward styles', () => {
         const { notification } = setup({ style: { color: 'red' } });
+
         expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: red');
+        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
     });
 
     // Common tests suite.

package/src/components/notification/Notification.tsx

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

package/src/components/popover/Popover.test.tsx

@@ -1,5 +1,3 @@
-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 React, { ReactNode, RefObject, useRef } from 'react';
+import { ReactNode, RefObject, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/popover/usePopoverStyle.tsx

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

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

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

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

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

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

@@ -1,5 +1,3 @@
-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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isObject from 'lodash/isObject';

package/src/components/progress/Progress.tsx

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

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

@@ -1,4 +1,3 @@
-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';