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

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

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

package/src/components/progress/ProgressCircular.tsx

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

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

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

package/src/components/progress/ProgressLinear.tsx

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

package/src/components/progress-tracker/ProgressTracker.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@lumx/react';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default { title: 'LumX components/progress-tracker/Progress Tracker' };
 

package/src/components/progress-tracker/ProgressTracker.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
     ProgressTracker,
     ProgressTrackerProvider,

package/src/components/progress-tracker/ProgressTrackerProvider.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useReducer } from 'react';
+import { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';
 
 export interface ProgressTrackerProviderProps {

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerStep.tsx

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

package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';

package/src/components/radio-button/RadioButton.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
@@ -86,7 +84,7 @@ describe(`<${RadioButton.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when radioButton is clicked', async () => {
             const value = 'value';
@@ -102,7 +100,7 @@ describe(`<${RadioButton.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ isDisabled: true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
@@ -115,7 +113,7 @@ describe(`<${RadioButton.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');

package/src/components/radio-button/RadioButton.tsx

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

package/src/components/radio-button/RadioGroup.stories.tsx

@@ -1,5 +1,5 @@
 import { RadioButton, RadioGroup } from '@lumx/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default { title: 'LumX components/radio-button/Radio Group' };
 

package/src/components/radio-button/RadioGroup.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/radio-button/RadioGroup.tsx

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

package/src/components/select/Select.stories.tsx

@@ -3,7 +3,7 @@ import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
-import React, { SyntheticEvent, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default {

package/src/components/select/Select.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Mock } from 'vitest';
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
@@ -13,8 +12,8 @@ import { Select, SelectProps, SelectVariant } from './Select';
 
 const CLASSNAME = Select.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -35,7 +34,7 @@ const setup = (propsOverride: Partial<SelectProps> = {}, { wrapper }: SetupRende
 };
 
 describe(`<${Select.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
+    (isFocusVisible as Mock).mockReturnValue(false);
 
     describe('Props', () => {
         it('should have default classNames', () => {
@@ -144,7 +143,7 @@ describe(`<${Select.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onDropdownClose` on escape', async () => {
-            const onDropdownClose = jest.fn();
+            const onDropdownClose = vi.fn();
             const { getDropdown } = setup({ isOpen: true, onDropdownClose });
 
             const dropdown = getDropdown();
@@ -156,7 +155,7 @@ describe(`<${Select.displayName}>`, () => {
 
         describe('should trigger `onInputClick` when the select button is clicked', () => {
             it('with input variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
 
                 await userEvent.click(inputWrapper as any);
@@ -164,7 +163,7 @@ describe(`<${Select.displayName}>`, () => {
             });
 
             it('with chip variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
 
                 await userEvent.click(chip as any);
@@ -174,7 +173,7 @@ describe(`<${Select.displayName}>`, () => {
 
         it('should call onClear when clear icon is clicked in select input', async () => {
             const value = 'Value';
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { select, props } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } });
 
             const clearButton = within(select).getByRole('button', { name: props.clearButtonProps?.label });

package/src/components/select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import { RefObject } from 'react';
 
 import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';

package/src/components/select/SelectMultiple.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
+import { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };

package/src/components/select/SelectMultiple.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
@@ -18,7 +16,7 @@ import { SelectVariant } from './constants';
 
 const CLASSNAME = SelectMultiple.className as string;
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -144,7 +142,7 @@ describe('<SelectMultiple>', () => {
     describe('Events', () => {
         describe('should trigger `onInputClick` when the select button is clicked', () => {
             it('with input variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
 
                 await userEvent.click(inputWrapper as any);
@@ -152,7 +150,7 @@ describe('<SelectMultiple>', () => {
             });
 
             it('with chip variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
 
                 await userEvent.click(chip as any);
@@ -161,7 +159,7 @@ describe('<SelectMultiple>', () => {
         });
 
         it('should call onClear when an item is clicked with the correct value', async () => {
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { valueChips } = setup({
                 onClear,
                 value: ['val 1', 'val 2'],
@@ -184,7 +182,7 @@ describe('<SelectMultiple>', () => {
             const value1 = 'Value 1';
             const value2 = 'Value 2';
 
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { chip } = setup({
                 onClear,
                 value: [value1, value2],

package/src/components/select/SelectMultiple.tsx

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

package/src/components/select/WithSelectContext.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { Ref, useCallback, useRef } from 'react';
+import { Ref, useCallback, useRef } from 'react';
 
 import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/core/js/constants';

package/src/components/select/constants.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import React, { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 
 /**
  * Select variants.

package/src/components/side-navigation/SideNavigation.test.tsx

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

package/src/components/side-navigation/SideNavigation.tsx

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

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
@@ -10,7 +8,7 @@ const CLASSNAME = SideNavigationItem.className as string;
 
 const toggleButtonProps = { label: 'Toggle' };
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -106,7 +104,7 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
 
     describe('children and link', () => {
         it('should render with children and link', () => {
-            const onActionClick = jest.fn();
+            const onActionClick = vi.fn();
             const label = 'Side navigation item';
             const { props, toggle, link } = setup({
                 label,

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -7,10 +7,9 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
-import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 /**
  * Defines the props of the component.
@@ -113,17 +112,15 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         >
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {renderLink(
-                        {
-                            linkAs,
-                            ...linkProps,
-                            className: `${CLASSNAME}__link`,
-                            onClick,
-                            tabIndex: 0,
-                        },
-                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                        <span>{label}</span>,
-                    )}
+                    <RawClickable
+                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                        {...(linkProps as any)}
+                        className={`${CLASSNAME}__link`}
+                        onClick={onClick}
+                    >
+                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                        <span>{label}</span>
+                    </RawClickable>
 
                     <IconButton
                         {...toggleButtonProps}
@@ -136,25 +133,23 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                     />
                 </div>
             ) : (
-                renderButtonOrLink(
-                    {
-                        linkAs,
-                        ...linkProps,
-                        className: `${CLASSNAME}__link`,
-                        tabIndex: 0,
-                        onClick,
-                        ...ariaProps,
-                    },
-                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                    <span>{label}</span>,
-                    hasContent && (
+                <RawClickable
+                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                    {...linkProps}
+                    className={`${CLASSNAME}__link`}
+                    onClick={onClick}
+                    {...ariaProps}
+                >
+                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                    <span>{label}</span>
+                    {hasContent && (
                         <Icon
                             className={`${CLASSNAME}__chevron`}
                             icon={isOpen ? mdiChevronUp : mdiChevronDown}
                             size={Size.xs}
                         />
-                    ),
-                )
+                    )}
+                </RawClickable>
             )}
 
             {(closeMode === 'hide' || showChildren) && (

package/src/components/skeleton/SkeletonCircle.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/skeleton/SkeletonCircle.tsx

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

package/src/components/skeleton/SkeletonRectangle.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/skeleton/SkeletonRectangle.tsx

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

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
 
 export default { title: 'LumX components/skeleton/Skeleton Typography' };

package/src/components/skeleton/SkeletonTypography.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/skeleton/SkeletonTypography.tsx

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

package/src/components/slider/Slider.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';
@@ -7,7 +5,7 @@ import { Slider, SliderProps } from './Slider';
 
 const CLASSNAME = Slider.className as string;
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const setup = (props: Partial<SliderProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(<Slider {...(props as any)} />, { wrapper });

package/src/components/slider/Slider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { SyntheticEvent, useMemo, useRef } from 'react';
+import { SyntheticEvent, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import range from 'lodash/range';
 import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/Slideshow.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/slideshow/SlideshowControls.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/SlideshowItem.tsx

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

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
 
 export interface UseSlideFocusManagementProps {

package/src/components/switch/Switch.test.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event/';
+import userEvent from '@testing-library/user-event';
 
 import { Switch, SwitchProps } from './Switch';
 
@@ -24,7 +22,7 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
     return { switchWrapper, input, helper, label, props };
 };
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 describe(`<${Switch.displayName}>`, () => {
     describe('Props', () => {
@@ -86,7 +84,7 @@ describe(`<${Switch.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when switchWrapper is clicked', async () => {
             const value = 'value';
@@ -102,7 +100,7 @@ describe(`<${Switch.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { switchWrapper, input } = setup({ isDisabled: true, onChange });
 
             expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
@@ -115,7 +113,7 @@ describe(`<${Switch.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { switchWrapper, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');

package/src/components/switch/Switch.tsx

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

package/src/components/table/Table.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 } from '@testing-library/react';

package/src/components/table/Table.tsx

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

package/src/components/table/TableBody.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/table/TableBody.tsx

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