@lumx/react 3.10.0 → 3.10.1-alpha.1

package/src/components/navigation/NavigationSection.tsx

@@ -5,7 +5,7 @@ import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { HasClassName } from '@lumx/react/utils/type';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
@@ -37,7 +37,7 @@ export const NavigationSection = Object.assign(
         const buttonRef = useRef<HTMLButtonElement>(null);
         const sectionId = useId();
         const { orientation } = useContext(NavigationContext) || {};
-        const theme = useContext(ThemeContext);
+        const theme = useTheme();
         const isDropdown = orientation === Orientation.horizontal;
         return (
             <li
@@ -87,13 +87,13 @@ export const NavigationSection = Object.assign(
                             onClose={() => setIsOpen(false)}
                             zIndex={996}
                         >
-                            <ThemeContext.Provider value={Theme.light}>
+                            <ThemeProvider value={Theme.light}>
                                 <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
                                     <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
                                         {children}
                                     </NavigationContext.Provider>
                                 </ul>
-                            </ThemeContext.Provider>
+                            </ThemeProvider>
                         </Popover>
                     ) : (
                         <ul className={`${CLASSNAME}__drawer`} id={sectionId}>

package/src/components/notification/Notification.tsx

@@ -1,19 +1,18 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
-
 import isFunction from 'lodash/isFunction';
 
 import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
-
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -51,7 +50,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<NotificationProps> = {
-    theme: Theme.light,
     zIndex: 9999,
     usePortal: true,
 };
@@ -64,7 +62,8 @@ const DEFAULT_PROPS: Partial<NotificationProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actionLabel,
         className,
@@ -72,7 +71,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         isOpen,
         onActionClick,
         onClick,
-        theme,
+        theme = defaultTheme,
         type,
         zIndex,
         usePortal,

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

@@ -1,18 +1,27 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 import { Popover, PopoverProps } from './Popover';
 
 const CLASSNAME = Popover.className as string;
 
-const setup = (props: Partial<PopoverProps> = {}) => {
+const setup = (props: Partial<PopoverProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const { container } = render(
         <Popover isOpen anchorRef={{ current: null }} usePortal={false} {...props} data-testid="popover">
-            {props.children || 'Popover content'}
+            {props.children || (
+                <>
+                    Popover content
+                    <ThemeSentinel />
+                </>
+            )}
         </Popover>,
+        { wrapper },
     );
-    return { props, container, element: screen.getByTestId('popover') };
+    const element = screen.getByTestId('popover');
+    const themeSentinel = screen.getByTestId(ThemeSentinel.testId);
+    return { props, container, element, themeSentinel };
 };
 
 describe(`<${Popover.displayName}>`, () => {
@@ -41,5 +50,10 @@ describe(`<${Popover.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',
         forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }, { not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: false,
+        },
     });
 });

package/src/components/popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, RefObject, useRef } from 'react';
+import React, { ReactNode, RefObject, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -12,7 +12,9 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { skipRender } from '@lumx/react/utils/skipRender';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
 import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
@@ -97,7 +99,7 @@ const renderPopover = (children: ReactNode, usePortal?: boolean): any => {
 };
 
 // Inner component (must be wrapped before export)
-const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref) => {
+const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         as: Component = 'div',
@@ -179,7 +181,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
                               </svg>
                           </div>
                       )}
-                      {children}
+                      <ThemeProvider value={undefined}>{children}</ThemeProvider>
                   </ClickAwayProvider>
               </Component>,
               usePortal,

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

@@ -1,8 +1,10 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
 
-import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Popover, PopoverProps } from '../popover/Popover';
 
@@ -34,7 +36,7 @@ const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
  * * Sets a focus trap within the popover
  * * Closes on click away and escape.
  */
-export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((props, ref) => {
     const {
         children,
         isOpen,

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

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { PostBlock, PostBlockProps } from './PostBlock';
 
 const CLASSNAME = PostBlock.className as string;
 
-const setup = (props: Partial<PostBlockProps> = {}) => {
-    render(<PostBlock {...(props as any)} />);
+const setup = (props: Partial<PostBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<PostBlock {...(props as any)} />, { wrapper });
     const postBlock = queryByClassName(document.body, CLASSNAME);
     return { props, postBlock };
 };
@@ -19,5 +19,11 @@ describe(`<${PostBlock.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'postBlock',
         forwardAttributes: 'postBlock',
+        applyTheme: {
+            affects: [{ element: 'postBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -1,13 +1,13 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-
 import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -50,7 +50,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<PostBlockProps> = {
     orientation: Orientation.horizontal,
-    theme: Theme.light,
 };
 
 /**
@@ -60,7 +59,8 @@ const DEFAULT_PROPS: Partial<PostBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         attachments,
@@ -71,7 +71,7 @@ export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props
         orientation,
         tags,
         text,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         ...forwardedProps
@@ -88,7 +88,6 @@ export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props
                     <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
                 </div>
             )}
-
             <div className={`${CLASSNAME}__wrapper`}>
                 {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
 

package/src/components/progress/Progress.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { ProgressLinear } from './ProgressLinear';
 import { ProgressCircular } from './ProgressCircular';
 
@@ -37,7 +39,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ProgressProps> = {
-    theme: Theme.light,
     variant: ProgressVariant.circular,
 };
 
@@ -49,8 +50,9 @@ const DEFAULT_PROPS: Partial<ProgressProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Progress: Comp<ProgressProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, variant, ...forwardedProps } = props;
+export const Progress = forwardRef<ProgressProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, variant, ...forwardedProps } = props;
 
     return (
         <div

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

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
-import { Theme } from '@lumx/react';
 
 import { ProgressCircular, ProgressCircularProps } from './ProgressCircular';
 
@@ -12,8 +11,8 @@ const CLASSNAME = ProgressCircular.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<ProgressCircularProps> = {}) => {
-    const { container } = render(<ProgressCircular {...(props as any)} />);
+const setup = (props: Partial<ProgressCircularProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(<ProgressCircular {...(props as any)} />, { wrapper });
     const element = getByClassName(container, CLASSNAME);
     return { container, element, props };
 };
@@ -21,23 +20,11 @@ const setup = (props: Partial<ProgressCircularProps> = {}) => {
 describe(`<${ProgressCircular.displayName}>`, () => {
     it('should render default', () => {
         const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
         expect(element).toHaveClass(`${CLASSNAME}--size-m`);
     });
 
-    it('should render dark theme', () => {
-        const { element } = setup({ theme: Theme.dark });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
-    });
-
     it('should render size xs', () => {
         const { element } = setup({ size: 'xs' });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
         expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
     });
 
@@ -45,5 +32,11 @@ describe(`<${ProgressCircular.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',
         forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/progress/ProgressCircular.tsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme, Size } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Progress sizes.
@@ -34,7 +35,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
-    theme: Theme.light,
     size: Size.m,
 };
 
@@ -45,8 +45,9 @@ const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, size, ...forwardedProps } = props;
+export const ProgressCircular = forwardRef<ProgressCircularProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, size, ...forwardedProps } = props;
 
     return (
         <div

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

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
-import { Theme } from '@lumx/react';
 
 import { ProgressLinear, ProgressLinearProps } from './ProgressLinear';
 
@@ -12,26 +11,22 @@ const CLASSNAME = ProgressLinear.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<ProgressLinearProps> = {}) => {
-    const { container } = render(<ProgressLinear {...(props as any)} />);
+const setup = (props: Partial<ProgressLinearProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(<ProgressLinear {...(props as any)} />, { wrapper });
     const element = getByClassName(container, CLASSNAME);
     return { container, element, props };
 };
 
 describe(`<${ProgressLinear.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
-
-    it('should render dark theme', () => {
-        const { element } = setup({ theme: Theme.dark });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
-    });
-
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
 });

package/src/components/progress/ProgressLinear.tsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface ProgressLinearProps extends GenericProps, HasTheme {}
 
@@ -22,9 +23,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ProgressLinearProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<ProgressLinearProps> = {};
 
 /**
  * ProgressLinear component.
@@ -33,8 +32,9 @@ const DEFAULT_PROPS: Partial<ProgressLinearProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressLinear: Comp<ProgressLinearProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+export const ProgressLinear = forwardRef<ProgressLinearProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div

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

@@ -1,10 +1,12 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 import { useTabProviderContextState } from '../tabs/state';
 
@@ -42,7 +44,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTracker: Comp<ProgressTrackerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ProgressTracker = forwardRef<ProgressTrackerProps, HTMLDivElement>((props, ref) => {
     const { 'aria-label': ariaLabel, children, className, ...forwardedProps } = props;
     const stepListRef = React.useRef(null);
     useRovingTabIndex({

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

@@ -1,13 +1,13 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
 
 import classNames from 'classnames';
 
+import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { useTabProviderContext } from '../tabs/state';
 
 /**
@@ -56,7 +56,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStep: Comp<ProgressTrackerStepProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,

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

@@ -1,10 +1,12 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
-
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -40,28 +42,26 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTMLDivElement> = forwardRef(
-    (props, ref) => {
-        const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
+export const ProgressTrackerStepPanel = forwardRef<ProgressTrackerStepPanelProps, HTMLDivElement>((props, ref) => {
+    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
-        const state = useTabProviderContext('tabPanel', id);
-        const isActive = propIsActive || state?.isActive;
+    const state = useTabProviderContext('tabPanel', id);
+    const isActive = propIsActive || state?.isActive;
 
-        return (
-            <div
-                ref={ref}
-                {...forwardedProps}
-                id={state?.tabPanelId}
-                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-                role="tabpanel"
-                tabIndex={isActive ? 0 : -1}
-                aria-labelledby={state?.tabId}
-            >
-                {(!state?.isLazy || isActive) && children}
-            </div>
-        );
-    },
-);
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            id={state?.tabPanelId}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
+            role="tabpanel"
+            tabIndex={isActive ? 0 : -1}
+            aria-labelledby={state?.tabId}
+        >
+            {(!state?.isLazy || isActive) && children}
+        </div>
+    );
+});
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
 ProgressTrackerStepPanel.className = CLASSNAME;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -14,9 +14,9 @@ type SetupProps = Partial<RadioButtonProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { id: 'fixedId', ...propsOverride };
-    render(<RadioButton {...props} />);
+    render(<RadioButton {...props} />, { wrapper });
 
     const radioButton = getByClassName(document.body, CLASSNAME);
     const helper = queryByClassName(radioButton, `${CLASSNAME}__helper`);
@@ -105,5 +105,11 @@ describe(`<${RadioButton.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'radioButton',
         forwardAttributes: 'radioButton',
+        applyTheme: {
+            affects: [{ element: 'radioButton' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });