@lumx/react 3.10.0 → 3.10.1-alpha.1

package/src/components/expansion-panel/ExpansionPanel.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 { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
@@ -29,7 +29,10 @@ const ControlledComponent = (props: ExpansionPanelProps) => {
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<ExpansionPanelProps> = {}, options: { controlled?: boolean } = {}) => {
+const setup = (
+    propsOverride: Partial<ExpansionPanelProps> = {},
+    options: { controlled?: boolean; wrapper?: SetupRenderOptions['wrapper'] } = {},
+) => {
     const props = {
         toggleButtonProps: { label: 'Toggle' },
         children: mockChildrenContent,
@@ -37,7 +40,7 @@ const setup = (propsOverride: Partial<ExpansionPanelProps> = {}, options: { cont
     };
 
     const Component = options.controlled ? ControlledComponent : ExpansionPanel;
-    const { container } = render(<Component {...props} />);
+    const { container } = render(<Component {...props} />, { wrapper: options.wrapper });
 
     return {
         container,
@@ -154,5 +157,11 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
         forwardClassName: 'element',
         forwardAttributes: 'element',
         forwardRef: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { Children, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,11 +9,13 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -51,9 +53,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
 
 const isDragHandle = isComponent(DragHandle);
 const isHeader = isComponent('header');
@@ -66,7 +66,8 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         children: anyChildren,
@@ -77,7 +78,7 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         onClose,
         onOpen,
         onToggleOpen,
-        theme,
+        theme = defaultTheme,
         toggleButtonProps,
         ...forwardedProps
     } = props;

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 
@@ -13,10 +13,10 @@ const CLASSNAME = Flag.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<FlagProps> = {}) => {
+const setup = (propOverrides: Partial<FlagProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props = { label: 'default', ...propOverrides };
 
-    render(<Flag {...props} />);
+    render(<Flag {...props} />, { wrapper });
     const flag = getByClassName(document.body, CLASSNAME);
     const icon = queryByClassName(flag, `${CLASSNAME}__icon`);
 
@@ -50,5 +50,15 @@ describe(`<${Flag.displayName} />`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flag', forwardAttributes: 'flag' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'flag',
+        forwardAttributes: 'flag',
+        applyTheme: {
+            affects: [{ element: 'flag', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/flag/Flag.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } 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 FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */
@@ -18,9 +21,7 @@ export interface FlagProps extends GenericProps, HasTheme {
 
 const COMPONENT_NAME = 'Flag';
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const DEFAULT_PROPS: Partial<FlagProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<FlagProps> = {};
 
 /**
  * Flag component.
@@ -29,8 +30,9 @@ const DEFAULT_PROPS: Partial<FlagProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, icon, color, className, theme, truncate, ...forwardedProps } = props;
+export const Flag = forwardRef<FlagProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { label, icon, color, className, theme = defaultTheme, truncate, ...forwardedProps } = props;
     const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
     const isTruncated = !!truncate;
 

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

@@ -1,9 +1,12 @@
-import { Alignment, Orientation } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import React, { ReactNode } from 'react';
+
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
-import React, { forwardRef, ReactNode } from 'react';
+
+import { Alignment, Orientation } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
@@ -55,7 +58,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const FlexBox = forwardRef<FlexBoxProps, HTMLDivElement>((props, ref) => {
     const {
         as: Component = 'div',
         children,

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

@@ -1,12 +1,15 @@
-import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
+import React, { Children, ReactElement, ReactNode } from 'react';
+
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
+
 import { Comp, isComponentType } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**

package/src/components/grid/Grid.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, Orientation, 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';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
 
@@ -49,7 +50,7 @@ const DEFAULT_PROPS: Partial<GridProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Grid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Grid = forwardRef<GridProps, HTMLDivElement>((props, ref) => {
     const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;
 
     return (

package/src/components/grid/GridItem.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment } 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';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 
@@ -37,7 +38,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const GridItem = forwardRef<GridItemProps, HTMLDivElement>((props, ref) => {
     const { children, className, width, align, order, ...forwardedProps } = props;
 
     return (

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

@@ -1,12 +1,12 @@
-import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import isInteger from 'lodash/isInteger';
-
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Size } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -50,7 +50,7 @@ const DEFAULT_PROPS: Partial<GridColumnProps> = {};
  * @param ref Component ref.
  * @return React element.
  */
-export const GridColumn: Comp<GridColumnProps> = forwardRef((props, ref): ReactElement => {
+export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement => {
     const {
         as: Component = 'div',
         gap,

package/src/components/heading/Heading.tsx

@@ -1,7 +1,11 @@
-import { Comp, HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import React from 'react';
+
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+
+import { HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { Text, TextProps } from '../text';
 import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
 import { useHeadingLevel } from './useHeadingLevel';
@@ -36,7 +40,7 @@ const DEFAULT_PROPS = {} as const;
  * Extends the `Text` Component with the heading level automatically computed based on
  * the current level provided by the context.
  */
-export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+export const Heading = forwardRef<HeadingProps>((props, ref) => {
     const { children, as, className, ...forwardedProps } = props;
     const { headingElement } = useHeadingLevel();
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
@@ -15,12 +15,12 @@ type SetupProps = Partial<IconProps>;
 /**
  * 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: IconProps = {
         icon: 'mdiPlus',
         ...propsOverride,
     };
-    render(<Icon {...props} />);
+    render(<Icon {...props} />, { wrapper });
     const i = getByClassName(document.body, CLASSNAME);
     const svg = getByTagName(i, 'svg');
     const path = getByTagName(svg, 'path');
@@ -114,5 +114,14 @@ describe(`<${Icon.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'i', forwardAttributes: 'i' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'i',
+        forwardAttributes: 'i',
+        applyTheme: {
+            affects: [{ element: 'i', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
 });

package/src/components/icon/Icon.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
+import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, 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 { mdiAlertCircle } from '@lumx/icons';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 
@@ -52,8 +54,19 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
-    const { className, color, colorVariant, hasShape, icon, size, theme, alt, ...forwardedProps } = props;
+export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const {
+        className,
+        color,
+        colorVariant,
+        hasShape,
+        icon,
+        size,
+        theme = defaultTheme,
+        alt,
+        ...forwardedProps
+    } = props;
 
     // Color
     let iconColor = color;

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

@@ -1,19 +1,21 @@
 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 { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
+import { Thumbnail } from '@lumx/react';
 import { ImageBlock, ImageBlockProps } from './ImageBlock';
 import { FullFeatured } from './ImageBlock.stories';
 
 const CLASSNAME = ImageBlock.className as string;
 
-const setup = (props: Partial<ImageBlockProps> = {}) => {
-    render(<ImageBlock {...(props as any)} />);
+const setup = (props: Partial<ImageBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<ImageBlock {...(props as any)} />, { wrapper });
     const imageBlock = queryByClassName(document.body, CLASSNAME);
-    return { props, imageBlock };
+    const thumbnail = queryByClassName(imageBlock as any, Thumbnail.className as string);
+    return { props, imageBlock, thumbnail };
 };
 
 describe(`<${ImageBlock.displayName}>`, () => {
@@ -47,5 +49,11 @@ describe(`<${ImageBlock.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'imageBlock',
         forwardAttributes: 'imageBlock',
+        applyTheme: {
+            affects: [{ element: 'imageBlock' }, { element: 'thumbnail' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -1,12 +1,14 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 import { ImageCaption, ImageCaptionMetadata } from './ImageCaption';
 
@@ -61,7 +63,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<ImageBlockProps> = {
     captionPosition: ImageBlockCaptionPosition.below,
-    theme: Theme.light,
     align: Alignment.left,
 };
 
@@ -72,7 +73,8 @@ const DEFAULT_PROPS: Partial<ImageBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         align,
@@ -86,7 +88,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
         image,
         size,
         tags,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         titleProps,

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

@@ -1,17 +1,18 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
+
 import { Lightbox } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
-import type { Comp } from '@lumx/react/utils/type';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ImageSlideshow } from './internal/ImageSlideshow';
 import { useImageLightbox } from './useImageLightbox';
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 
-const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+const Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {
     const {
         className,
         isOpen,

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

@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, isValidElement } from 'react';
+import React, { Children, isValidElement } from 'react';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -50,7 +51,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
+export const InlineList = forwardRef<InlineListProps>((props, ref) => {
     const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
     const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Kind, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import { INPUT_HELPER_CONFIGURATION } from '@lumx/react/components/input-helper/constants';
@@ -14,9 +14,9 @@ type SetupProps = Partial<InputHelperProps>;
 /**
  * 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 = { ...propsOverride };
-    render(<InputHelper {...props} />);
+    render(<InputHelper {...props} />, { wrapper });
     const helper = getByClassName(document.body, CLASSNAME);
 
     return { helper, props };
@@ -43,5 +43,15 @@ describe(`<${InputHelper.displayName}>`, () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'helper', forwardAttributes: 'helper' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'helper',
+        forwardAttributes: 'helper',
+        applyTheme: {
+            affects: [{ element: 'helper' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

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

@@ -1,9 +1,13 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { Kind, 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 classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { INPUT_HELPER_CONFIGURATION } from './constants';
 
 /**
@@ -31,7 +35,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<InputHelperProps> = {
     kind: Kind.info,
-    theme: Theme.light,
 };
 
 /**
@@ -41,8 +44,9 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputHelper: Comp<InputHelperProps, HTMLParagraphElement> = forwardRef((props, ref) => {
-    const { children, className, kind, theme, ...forwardedProps } = props;
+export const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, kind, theme = defaultTheme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
 
     return (

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Theme } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { InputLabel, InputLabelProps } from './InputLabel';
 
 const CLASSNAME = InputLabel.className as string;
@@ -13,9 +13,9 @@ type SetupProps = Partial<InputLabelProps>;
 /**
  * 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 = { htmlFor: 'id', ...propsOverride };
-    render(<InputLabel {...props} />);
+    render(<InputLabel {...props} />, { wrapper });
     const label = getByClassName(document.body, CLASSNAME);
 
     return { label, props };
@@ -40,5 +40,15 @@ describe(`<${InputLabel.displayName}>`, () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'label', forwardAttributes: 'label' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'label',
+        forwardAttributes: 'label',
+        applyTheme: {
+            affects: [{ element: 'label' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });