@lumx/react 3.10.0 → 3.10.1-alpha.0

package/src/components/skeleton/SkeletonRectangle.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 { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
 
 const CLASSNAME = SkeletonRectangle.className as string;
 
-const setup = (props: Partial<SkeletonRectangleProps> = {}) => {
-    render(<SkeletonRectangle {...(props as any)} />);
+const setup = (props: Partial<SkeletonRectangleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<SkeletonRectangle {...(props as any)} />, { wrapper });
     const skeletonRectangle = queryByClassName(document.body, CLASSNAME);
     return { props, skeletonRectangle };
 };
@@ -19,5 +19,11 @@ describe(`<${SkeletonRectangle.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'skeletonRectangle',
         forwardAttributes: 'skeletonRectangle',
+        applyTheme: {
+            affects: [{ element: 'skeletonRectangle' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef } from 'react';
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Skeleton variants.
@@ -28,7 +29,6 @@ export interface SkeletonRectangleProps extends GenericProps, HasTheme {
 }
 
 const DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {
-    theme: Theme.light,
     variant: SkeletonRectangleVariant.squared,
 };
 
@@ -50,7 +50,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { aspectRatio, className, height, theme, variant, width, color, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { aspectRatio, className, height, theme = defaultTheme, variant, width, color, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/skeleton/SkeletonTypography.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 { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
 
 const CLASSNAME = SkeletonTypography.className as string;
 
-const setup = (props: Partial<SkeletonTypographyProps> = {}) => {
-    render(<SkeletonTypography {...(props as any)} />);
+const setup = (props: Partial<SkeletonTypographyProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<SkeletonTypography {...(props as any)} />, { wrapper });
     const skeletonTypography = queryByClassName(document.body, CLASSNAME);
     return { props, skeletonTypography };
 };
@@ -19,5 +19,11 @@ describe(`<${SkeletonTypography.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'skeletonTypography',
         forwardAttributes: 'skeletonTypography',
+        applyTheme: {
+            affects: [{ element: 'skeletonTypography' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/skeleton/SkeletonTypography.tsx

@@ -4,6 +4,7 @@ import React, { CSSProperties, forwardRef } from 'react';
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -17,9 +18,7 @@ export interface SkeletonTypographyProps extends GenericProps, HasTheme {
     color?: ColorPalette;
 }
 
-const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};
 
 /**
  * Component display name.
@@ -39,7 +38,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, typography, width, color, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/slider/Slider.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 { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Slider, SliderProps } from './Slider';
@@ -9,8 +9,8 @@ const CLASSNAME = Slider.className as string;
 
 jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
-const setup = (props: Partial<SliderProps> = {}) => {
-    render(<Slider {...(props as any)} />);
+const setup = (props: Partial<SliderProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Slider {...(props as any)} />, { wrapper });
     const slider = queryByClassName(document.body, CLASSNAME);
     return { props, slider };
 };
@@ -21,5 +21,11 @@ describe(`<${Slider.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'slider',
         forwardAttributes: 'slider',
+        applyTheme: {
+            affects: [{ element: 'slider' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/slider/Slider.tsx

@@ -11,6 +11,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 
 import { clamp } from '@lumx/react/utils/clamp';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -58,7 +59,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<SliderProps> = {
     precision: 0,
     steps: 0,
-    theme: Theme.light,
 };
 
 /**
@@ -92,6 +92,7 @@ const computePercentFromValue = (value: number, min: number, max: number): numbe
  * @return React element.
  */
 export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         disabled,
@@ -107,7 +108,7 @@ export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref)
         onMouseDown,
         precision,
         steps,
-        theme,
+        theme = defaultTheme,
         value,
         ...forwardedProps
     } = props;

package/src/components/slideshow/Slides.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
@@ -54,11 +55,12 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         activeIndex,
         id,
         className,
-        theme,
+        theme = defaultTheme,
         fillHeight,
         groupBy,
         isAutoPlaying,

package/src/components/slideshow/Slideshow.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 { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Slideshow, SlideshowProps } from './Slideshow';
@@ -8,7 +8,7 @@ import { Slides } from './Slides';
 
 const CLASSNAME = Slides.className as string;
 
-const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
+const setup = (propsOverride: Partial<SlideshowProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: SlideshowProps = {
         slideshowControlsProps: {
             nextButtonProps: { label: 'Next' },
@@ -16,7 +16,7 @@ const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
         },
         ...propsOverride,
     };
-    render(<Slideshow {...props} />);
+    render(<Slideshow {...props} />, { wrapper });
     const slideShow = queryByClassName(document.body, CLASSNAME);
     return { props, slideShow };
 };
@@ -27,5 +27,11 @@ describe(`<${Slideshow.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'slideShow',
         forwardAttributes: 'slideShow',
+        applyTheme: {
+            affects: [{ element: 'slideShow' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/slideshow/Slideshow.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { buildSlideShowGroupId } from './SlideshowItemGroup';
 
 /**
@@ -41,7 +42,6 @@ export interface SlideshowProps
  */
 const DEFAULT_PROPS: Partial<SlideshowProps> = {
     ...DEFAULT_OPTIONS,
-    theme: Theme.light,
 };
 
 /**
@@ -52,6 +52,7 @@ const DEFAULT_PROPS: Partial<SlideshowProps> = {
  * @return React element.
  */
 export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,
         autoPlay,
@@ -62,7 +63,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         interval,
         onChange,
         slideshowControlsProps,
-        theme,
+        theme = defaultTheme,
         id,
         slidesId,
         slideGroupLabel,

package/src/components/slideshow/SlideshowControls.tsx

@@ -11,6 +11,7 @@ import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useSwipeNavigate } from './useSwipeNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
@@ -70,7 +71,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
     activeIndex: 0,
-    theme: Theme.light,
 };
 
 /**
@@ -81,6 +81,7 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
  * @return React element.
  */
 const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,
         className,
@@ -92,7 +93,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         previousButtonProps,
         paginationProps,
         slidesCount,
-        theme,
+        theme = defaultTheme,
         isAutoPlaying = false,
         playButtonProps,
         paginationItemLabel,

package/src/components/switch/Switch.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 { render } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event/';
@@ -14,9 +14,9 @@ type SetupProps = Partial<SwitchProps>;
 /**
  * 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 = { ...propsOverride };
-    render(<Switch {...props} />);
+    render(<Switch {...props} />, { wrapper });
     const switchWrapper = getByClassName(document.body, CLASSNAME);
     const input = getByTagName(switchWrapper, 'input');
     const helper = queryByClassName(switchWrapper, `${CLASSNAME}__helper`);
@@ -106,5 +106,11 @@ describe(`<${Switch.displayName}>`, () => {
         forwardClassName: 'switchWrapper',
         forwardAttributes: 'switchWrapper',
         forwardRef: 'switchWrapper',
+        applyTheme: {
+            affects: [{ element: 'switchWrapper' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/switch/Switch.tsx

@@ -9,6 +9,7 @@ import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -47,7 +48,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SwitchProps> = {
     position: Alignment.left,
-    theme: Theme.light,
 };
 
 /**
@@ -58,6 +58,7 @@ const DEFAULT_PROPS: Partial<SwitchProps> = {
  * @return React element.
  */
 export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         children,
@@ -70,7 +71,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
         name,
         onChange,
         position,
-        theme,
+        theme = defaultTheme,
         value,
         inputProps = {},
         ...forwardedProps

package/src/components/table/Table.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 { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 
@@ -8,8 +8,8 @@ import { Table, TableProps } from './Table';
 
 const CLASSNAME = Table.className as string;
 
-const setup = (props: Partial<TableProps> = {}) => {
-    render(<Table {...(props as any)} />);
+const setup = (props: Partial<TableProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Table {...(props as any)} />, { wrapper });
     const table = queryByClassName(document.body, CLASSNAME);
     return { props, table };
 };
@@ -21,5 +21,11 @@ describe(`<${Table.displayName}>`, () => {
         forwardClassName: 'table',
         forwardAttributes: 'table',
         forwardRef: 'table',
+        applyTheme: {
+            affects: [{ element: 'table' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/table/Table.tsx

@@ -6,6 +6,7 @@ import { Theme } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -30,9 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<TableProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<TableProps> = {};
 
 /**
  * Table component.
@@ -42,7 +41,8 @@ const DEFAULT_PROPS: Partial<TableProps> = {
  * @return React element.
  */
 export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
-    const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, hasBefore, hasDividers, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <table

package/src/components/tabs/TabList.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Tab } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 
@@ -14,7 +14,7 @@ type SetupProps = Partial<TabListProps>;
 /**
  * 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 tabs = [<Tab key={0} label="Tab 0" />, <Tab key={1} label="Tab 1" />];
     const props: TabListProps = {
         children: tabs,
@@ -22,7 +22,7 @@ const setup = (propsOverride: SetupProps = {}) => {
         ...propsOverride,
     };
 
-    render(<TabList {...props} />);
+    render(<TabList {...props} />, { wrapper });
     const tabList = getByClassName(document.body, CLASSNAME);
     const links = queryByClassName(tabList, `${CLASSNAME}__links`);
     return { props, tabList, links };
@@ -41,5 +41,11 @@ describe(`<${TabList.displayName}>`, () => {
         forwardClassName: 'tabList',
         forwardAttributes: 'tabList',
         forwardRef: 'tabList',
+        applyTheme: {
+            affects: [{ element: 'tabList' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/tabs/TabList.tsx

@@ -6,6 +6,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
@@ -43,7 +44,6 @@ const CLASSNAME = `${CSS_PREFIX}-tabs`;
 const DEFAULT_PROPS: Partial<TabListProps> = {
     layout: TabListLayout.fixed,
     position: Alignment.left,
-    theme: Theme.light,
 };
 
 /**
@@ -56,7 +56,16 @@ const DEFAULT_PROPS: Partial<TabListProps> = {
  * @return React element.
  */
 export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { 'aria-label': ariaLabel, children, className, layout, position, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        'aria-label': ariaLabel,
+        children,
+        className,
+        layout,
+        position,
+        theme = defaultTheme,
+        ...forwardedProps
+    } = props;
     const tabListRef = React.useRef(null);
     useRovingTabIndex({
         parentRef: tabListRef,

package/src/components/text-field/TextField.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import camelCase from 'lodash/camelCase';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 import { render } from '@testing-library/react';
 import {
@@ -25,9 +25,9 @@ jest.mock('@lumx/react/utils/isFocusVisible');
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
+const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { ...propsOverride };
-    const { container } = render(<TextField {...props} />);
+    const { container } = render(<TextField {...props} />, { wrapper });
 
     const element = getByClassName(container, CLASSNAME);
     const inputNative = (queryByTagName(container, 'textarea') || getByTagName(container, 'input')) as
@@ -233,5 +233,11 @@ describe(`<${TextField.displayName}>`, () => {
         forwardClassName: 'element',
         forwardAttributes: 'inputNative',
         forwardRef: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/text-field/TextField.tsx

@@ -20,6 +20,7 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -101,7 +102,6 @@ const DEFAULT_MIN_ROWS = 2;
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<TextFieldProps> = {
-    theme: Theme.light,
     type: 'text',
 };
 
@@ -255,6 +255,7 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
  * @return React element.
  */
 export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         chips,
         className,
@@ -282,7 +283,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         onFocus,
         placeholder,
         textFieldRef,
-        theme,
+        theme = defaultTheme,
         type,
         value,
         afterElement,

package/src/components/thumbnail/Thumbnail.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 { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
 
-const setup = (props: Partial<ThumbnailProps> = {}) => {
-    render(<Thumbnail {...(props as any)} />);
+const setup = (props: Partial<ThumbnailProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Thumbnail {...(props as any)} />, { wrapper });
     const thumbnail = queryByClassName(document.body, CLASSNAME);
     return { props, thumbnail };
 };
@@ -19,5 +19,11 @@ describe(`<${Thumbnail.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'thumbnail',
         forwardAttributes: 'thumbnail',
+        applyTheme: {
+            affects: [{ element: 'thumbnail' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/thumbnail/Thumbnail.tsx

@@ -20,6 +20,7 @@ import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -88,7 +89,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<ThumbnailProps> = {
     fallback: mdiImageBroken,
     loading: 'lazy',
-    theme: Theme.light,
 };
 
 /**
@@ -99,6 +99,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         align,
         alt,
@@ -119,7 +120,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         loading,
         loadingPlaceholderImageRef,
         size,
-        theme,
+        theme = defaultTheme,
         variant,
         linkProps,
         linkAs,

package/src/components/uploader/Uploader.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 { render, screen } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -15,10 +15,10 @@ type SetupProps = Partial<UploaderProps>;
 /**
  * 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(<Uploader {...props} />);
+    render(<Uploader {...props} />, { wrapper });
     const uploader = getByClassName(document.body, CLASSNAME);
     const label = queryByClassName(uploader, `${CLASSNAME}__label`);
     const icon = queryByClassName(uploader, `${CLASSNAME}__icon`);
@@ -117,5 +117,11 @@ describe(`<${Uploader.displayName}>`, () => {
         forwardClassName: 'uploader',
         forwardAttributes: 'uploader',
         forwardRef: 'uploader',
+        applyTheme: {
+            affects: [{ element: 'uploader' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });