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

package/src/components/comment-block/CommentBlock.tsx

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

package/src/components/date-picker/DatePicker.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { DatePickerProps } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
@@ -7,15 +9,15 @@ import { DatePicker } from '.';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = vi.fn(() => mockedDate.valueOf());
-vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = jest.fn(() => mockedDate.valueOf());
+jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
 const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
     const props: DatePickerProps = {
         locale: 'fr',
-        onChange: vi.fn(),
+        onChange: jest.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/date-picker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
@@ -8,8 +10,8 @@ import { DatePickerControlled, DatePickerControlledProps } from './DatePickerCon
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = vi.fn(() => mockedDate.valueOf());
-vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = jest.fn(() => mockedDate.valueOf());
+jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -18,14 +20,14 @@ type SetupProps = Partial<DatePickerControlledProps>;
 const setup = (propsOverride: SetupProps = {}) => {
     const props: DatePickerControlledProps = {
         locale: 'fr',
-        onChange: vi.fn(),
-        onNextMonthChange: vi.fn(),
-        onPrevMonthChange: vi.fn(),
+        onChange: jest.fn(),
+        onNextMonthChange: jest.fn(),
+        onPrevMonthChange: jest.fn(),
         selectedMonth: mockedDate,
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },
-        onMonthChange: vi.fn(),
+        onMonthChange: jest.fn(),
         ...propsOverride,
     };
     render(<DatePickerControlled {...props} />);

package/src/components/date-picker/DatePickerField.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, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -8,8 +10,8 @@ import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = vi.fn(() => mockedDate.valueOf());
-vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = jest.fn(() => mockedDate.valueOf());
+jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -17,7 +19,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: S
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
-        onChange: vi.fn(),
+        onChange: jest.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/dialog/Dialog.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
@@ -49,7 +51,7 @@ describe(`<${Dialog.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('[Escape]');
@@ -57,7 +59,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('a');
@@ -65,7 +67,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose, preventAutoClose: true });
 
             await userEvent.keyboard('[Escape]');
@@ -73,7 +75,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose, preventCloseOnEscape: true });
 
             await userEvent.keyboard('[Escape]');

package/src/components/divider/Divider.test.tsx

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

package/src/components/divider/Divider.tsx

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

package/src/components/drag-handle/DragHandle.test.tsx

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

package/src/components/drag-handle/DragHandle.tsx

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

package/src/components/dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import range from 'lodash/range';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { Button, Dropdown, List, ListItem } from '@lumx/react';
 

package/src/components/dropdown/Dropdown.test.tsx

@@ -28,7 +28,7 @@ const setup = (propsOverride: Partial<DropdownProps> = {}) => {
 describe(`<${Dropdown.displayName}>`, () => {
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({
                 closeOnEscape: true,
                 onClose,
@@ -40,7 +40,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose, closeOnEscape: true });
 
             await userEvent.keyboard('a');
@@ -48,7 +48,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', async () => {
-            const onClose = vi.fn();
+            const onClose = jest.fn();
             setup({ isOpen: true, onClose, closeOnEscape: false });
 
             await userEvent.keyboard('[Escape]');

package/src/components/dropdown/Dropdown.tsx

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

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -1,4 +1,5 @@
-import { Mock } from 'vitest';
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -10,7 +11,7 @@ import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 
@@ -54,7 +55,7 @@ const setup = (
 };
 
 describe(`<${ExpansionPanel.displayName}>`, () => {
-    (isFocusVisible as Mock).mockReturnValue(false);
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
 
     describe('Render', () => {
         it('should render default', () => {
@@ -99,9 +100,9 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onOpen = vi.fn();
-        const onClose = vi.fn();
-        const onToggleOpen = vi.fn();
+        const onOpen = jest.fn();
+        const onClose = jest.fn();
+        const onToggleOpen = jest.fn();
 
         beforeEach(onOpen.mockClear);
         beforeEach(onClose.mockClear);

package/src/components/flag/Flag.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';

package/src/components/flag/Flag.tsx

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

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
 
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';

package/src/components/flex-box/FlexBox.test.tsx

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

package/src/components/flex-box/FlexBox.tsx

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

package/src/components/generic-block/GenericBlock.test.tsx

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

package/src/components/grid/Grid.tsx

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

package/src/components/grid/GridItem.tsx

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

package/src/components/grid-column/GridColumn.stories.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/display-name */
+import React from 'react';
 import range from 'lodash/range';
 
 import { GridColumn, GridColumnProps } from '@lumx/react/components/grid-column/GridColumn';

package/src/components/grid-column/GridColumn.test.jsx

@@ -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/grid-column/GridColumn.tsx

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

package/src/components/heading/Heading.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { headingElementArgType, HEADING_ELEMENTS } from '@lumx/react/stories/controls/element';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { ALL_TYPOGRAPHY } from '@lumx/react/stories/controls/typography';

package/src/components/heading/Heading.test.tsx

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

package/src/components/heading/Heading.tsx

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

package/src/components/heading/HeadingLevelProvider.tsx

@@ -1,5 +1,5 @@
 import { HeadingElement } from '@lumx/react/utils/type';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { MAX_HEADING_LEVEL } from './constants';
 import { HeadingLevelContext } from './context';
 import { useHeadingLevel } from './useHeadingLevel';

package/src/components/icon/Icon.stories.tsx

@@ -1,47 +1,21 @@
+import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, GridColumn, Icon, IconSizes, Size } from '@lumx/react';
+import { ColorPalette, ColorVariant, GridColumn, Icon, Size } from '@lumx/react';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-const iconSizes: Array<IconSizes> = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
 export default {
     title: 'LumX components/icon/Icon',
     component: Icon,
-    args: Icon.defaultProps,
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
+    ...DefaultStory,
 };
 
 /**
  * All combinations of size and shape
  */
 export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
+    ...DefaultSizeAndShape,
 };
 
 /**

package/src/components/icon/Icon.test.tsx

@@ -1,9 +1,10 @@
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+import Tests from '@lumx/core/js/components/Icon/Tests';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -27,89 +28,7 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { i, svg, path, props } = setup();
-
-            expect(i).toBeInTheDocument();
-            expect(i).toHaveClass(CLASSNAME);
-            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-            expect(svg).toBeInTheDocument();
-            expect(svg).toHaveAttribute('aria-hidden', 'true');
-            expect(svg).not.toHaveAttribute('role');
-
-            expect(path).toBeInTheDocument();
-            expect(path).toHaveAttribute('d', props.icon);
-        });
-
-        it('should adapt svg with alternate text', () => {
-            const { svg, props } = setup({ alt: 'Alternate text' });
-            expect(svg).toHaveAttribute('aria-label', props.alt);
-            expect(svg).not.toHaveAttribute('aria-hidden');
-            expect(svg).toHaveAttribute('role');
-        });
-
-        describe('size', () => {
-            it('should render size', () => {
-                const { i } = setup({ size: Size.s });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxl size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxl });
-                expect(i).toHaveClass('lumx-icon--size-xl');
-            });
-
-            it('should add default size with hasShape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--size-m');
-            });
-        });
-
-        describe('color', () => {
-            it('should render color and color variant', () => {
-                const { i } = setup({
-                    color: ColorPalette.primary,
-                    colorVariant: ColorVariant.D1,
-                });
-                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-            });
-
-            it('should improve yellow icon color contrast with alert circle icon', () => {
-                const { i } = setup({
-                    color: ColorPalette.yellow,
-                    icon: mdiAlertCircle,
-                });
-                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-            });
-
-            it('should set a default color on dark theme', () => {
-                const { i } = setup({ theme: Theme.dark });
-                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-            });
-
-            it('should set a default color on has shape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-            });
-
-            it('should set a default color variant on has shape & dark color', () => {
-                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-            });
-        });
-    });
+    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
 
     // Common tests suite.
     commonTestsSuiteRTL(setup, {

package/src/components/icon/Icon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
 
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/image-block/ImageBlock.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     Alignment,
     AspectRatio,

package/src/components/image-block/ImageBlock.test.tsx

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

package/src/components/image-block/ImageBlock.tsx

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

package/src/components/image-block/ImageCaption.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';
 import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';

package/src/components/image-lightbox/ImageLightbox.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IMAGES } from '@lumx/react/stories/controls/image';
 import { Button, Mosaic, ImageLightbox, ImageLightboxProps, Chip, ChipGroup } from '@lumx/react';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen, waitFor } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
@@ -16,8 +18,8 @@ import Meta, {
     WithMosaicTrigger,
 } from './ImageLightbox.stories';
 
-vi.mock('@lumx/react/hooks/useImageSize');
-vi.mock('@lumx/react/hooks/useSizeOnWindowResize');
+jest.mock('@lumx/react/hooks/useImageSize');
+jest.mock('@lumx/react/hooks/useSizeOnWindowResize');
 
 const CLASSNAME = ImageLightbox.className as string;
 const baseProps = Meta.args;
@@ -54,7 +56,7 @@ const queries = {
 describe(`<${ImageLightbox.displayName}>`, () => {
     beforeEach(() => {
         (useImageSize as any).mockReturnValue(null);
-        (useSizeOnWindowResize as any).mockReturnValue([null, vi.fn()]);
+        (useSizeOnWindowResize as any).mockReturnValue([null, jest.fn()]);
     });
 
     describe('render', () => {
@@ -157,9 +159,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
+            expect(imageLightbox).not.toBeInTheDocument();
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -185,9 +185,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
+            expect(imageLightbox).not.toBeInTheDocument();
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -198,7 +196,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         const scrollAreaSize = { width: 600, height: 600 };
         beforeEach(() => {
             (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, vi.fn()]);
+            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
         });
 
         it('should use the image initial size', () => {

package/src/components/image-lightbox/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } from '@lumx/react';
 import type { HasClassName } from '@lumx/react/utils/type';
 import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { mdiEarth } from '@lumx/icons';
 import { Icon, Text } from '@lumx/react';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';

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

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

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

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