@lumx/react 3.10.0 → 3.10.1-alpha.1

package/src/components/table/TableRow.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import React 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<TableRowProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {
+export const TableRow = forwardRef<TableRowProps, HTMLTableRowElement>((props, ref) => {
     const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;
 
     return (

package/src/components/tabs/Tab.tsx

@@ -1,11 +1,12 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 
 import classNames from 'classnames';
 
 import { Icon, IconProps, Size, Text } from '@lumx/react';
 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTabProviderContext } from './state';
 
@@ -53,7 +54,7 @@ const DEFAULT_PROPS: Partial<TabProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) => {
+export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
     const {
         className,
         disabled,

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

@@ -1,11 +1,15 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
@@ -43,7 +47,6 @@ const CLASSNAME = `${CSS_PREFIX}-tabs`;
 const DEFAULT_PROPS: Partial<TabListProps> = {
     layout: TabListLayout.fixed,
     position: Alignment.left,
-    theme: Theme.light,
 };
 
 /**
@@ -55,8 +58,17 @@ const DEFAULT_PROPS: Partial<TabListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { 'aria-label': ariaLabel, children, className, layout, position, theme, ...forwardedProps } = props;
+export const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {
+    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/tabs/TabPanel.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 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';
-
 /**
  * Defines the props of the component.
  */
@@ -40,7 +42,7 @@ const DEFAULT_PROPS: Partial<TabPanelProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {
     const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
 
     const state = useTabProviderContext('tabPanel', id);

package/src/components/text/Text.tsx

@@ -1,16 +1,18 @@
-import React, { Children, Fragment, forwardRef } from 'react';
+import React, { Children, Fragment } from 'react';
+
+import classNames from 'classnames';
 
 import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
 } from '@lumx/react/utils/className';
-import classNames from 'classnames';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -73,7 +75,7 @@ const DEFAULT_PROPS = {} as const;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+export const Text = forwardRef<TextProps>((props, ref) => {
     const {
         as: Component,
         children,

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -16,10 +16,12 @@ import {
     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 { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -101,7 +103,6 @@ const DEFAULT_MIN_ROWS = 2;
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<TextFieldProps> = {
-    theme: Theme.light,
     type: 'text',
 };
 
@@ -254,7 +255,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         chips,
         className,
@@ -282,7 +284,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

@@ -1,6 +1,5 @@
 import React, {
     CSSProperties,
-    forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
     MouseEventHandler,
@@ -9,17 +8,19 @@ import React, {
     Ref,
     useState,
 } from 'react';
+
 import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
-
-import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 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,
 };
 
 /**
@@ -98,7 +98,8 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
+export const Thumbnail = forwardRef<ThumbnailProps>((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/toolbar/Toolbar.tsx

@@ -1,9 +1,10 @@
-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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -39,7 +40,7 @@ const DEFAULT_PROPS: Partial<ToolbarProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Toolbar = forwardRef<ToolbarProps, HTMLDivElement>((props, ref) => {
     const { after, before, className, label, ...forwardedProps } = props;
 
     return (

package/src/components/tooltip/Tooltip.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { forwardRef, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
 import { usePopper } from '@lumx/react/hooks/usePopper';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
@@ -70,7 +71,7 @@ const ARROW_SIZE = 8;
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {
     const {
         label,
         children,

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',
+        },
     });
 });

package/src/components/uploader/Uploader.tsx

@@ -1,11 +1,14 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
+import React, { MouseEventHandler } from 'react';
+
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, 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 { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Uploader variants.
@@ -65,7 +68,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<UploaderProps> = {
     aspectRatio: AspectRatio.horizontal,
     size: Size.xl,
-    theme: Theme.light,
     variant: UploaderVariant.square,
 };
 
@@ -76,8 +78,19 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
-    const { aspectRatio, className, label, icon, size, theme, variant, fileInputProps, ...forwardedProps } = props;
+export const Uploader = forwardRef<UploaderProps>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        aspectRatio,
+        className,
+        label,
+        icon,
+        size,
+        theme = defaultTheme,
+        variant,
+        fileInputProps,
+        ...forwardedProps
+    } = props;
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 

package/src/components/user-block/UserBlock.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, within } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Thumbnail } from '@lumx/react';
@@ -13,10 +13,10 @@ const CLASSNAME = UserBlock.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<UserBlockProps> = {}) => {
+const setup = (propsOverride: Partial<UserBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: UserBlockProps = { ...propsOverride };
 
-    render(<UserBlock {...props} />);
+    render(<UserBlock {...props} />, { wrapper });
     const userBlock = getByClassName(document.body, CLASSNAME);
     const name = queryByClassName(userBlock, `${CLASSNAME}__name`);
     const avatar = queryByClassName(userBlock, `${CLASSNAME}__avatar`);
@@ -86,5 +86,11 @@ describe(`<${UserBlock.displayName}>`, () => {
         forwardClassName: 'userBlock',
         forwardAttributes: 'userBlock',
         forwardRef: 'userBlock',
+        applyTheme: {
+            affects: [{ element: 'userBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/user-block/UserBlock.tsx

@@ -1,12 +1,15 @@
-import React, { forwardRef, ReactNode } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import React, { ReactNode } from 'react';
+
 import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, 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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -62,7 +65,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<UserBlockProps> = {
     orientation: Orientation.horizontal,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -72,7 +74,8 @@ const DEFAULT_PROPS: Partial<UserBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         avatarProps,
         className,
@@ -88,7 +91,7 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         orientation,
         simpleAction,
         size,
-        theme,
+        theme = defaultTheme,
         ...forwardedProps
     } = props;
     let componentSize = size;

package/src/index.ts

@@ -58,3 +58,4 @@ export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/uploader';
 export * from './components/user-block';
+export { ThemeProvider, useTheme } from './utils/theme/ThemeContext';

package/src/testing/utils/ThemeSentinel.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
+const TEST_ID = 'theme-sentinel';
+
+/** Test component used as sentinel to detect the value of the theme context */
+export function ThemeSentinel() {
+    const theme = useTheme();
+    return <div data-testid={TEST_ID} className={`--theme-${theme}`} />;
+}
+ThemeSentinel.testId = TEST_ID;