@lumx/react 3.10.0 → 3.10.1-alpha.1

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

@@ -1,8 +1,12 @@
+import React, { ReactNode } 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 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';
 
 /**
  * Defines the props of the component.
@@ -29,9 +33,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<InputLabelProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<InputLabelProps> = {};
 
 /**
  * InputLabel component.
@@ -40,8 +42,9 @@ const DEFAULT_PROPS: Partial<InputLabelProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const InputLabel: Comp<InputLabelProps, HTMLLabelElement> = forwardRef((props, ref) => {
-    const { children, className, htmlFor, isRequired, theme, ...forwardedProps } = props;
+export const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, htmlFor, isRequired, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <label

package/src/components/lightbox/Lightbox.test.tsx

@@ -1,18 +1,24 @@
 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 { render, screen } from '@testing-library/react';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
 import { Lightbox, LightboxProps } from './Lightbox';
 
 const CLASSNAME = Lightbox.className as string;
 
-const setup = (props: Partial<LightboxProps> = {}) => {
-    const propsOverride = { isOpen: true, ...props } as any;
-    const { container } = render(<Lightbox {...propsOverride} />);
+const setup = (props: Partial<LightboxProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const propsOverride = {
+        isOpen: true,
+        children: <ThemeSentinel />,
+        ...props,
+    } as any;
+    const { container } = render(<Lightbox {...propsOverride} />, { wrapper });
     const lightbox = queryByClassName(document.body, CLASSNAME);
-    return { props, container, lightbox };
+    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
+    return { props, container, lightbox, themeSentinel };
 };
 
 describe(`<${Lightbox.displayName}>`, () => {
@@ -22,5 +28,10 @@ describe(`<${Lightbox.displayName}>`, () => {
         forwardClassName: 'lightbox',
         forwardAttributes: 'lightbox',
         forwardRef: 'lightbox',
+        applyTheme: {
+            affects: [{ not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: true,
+        },
     });
 });

package/src/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/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 { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
@@ -15,6 +15,8 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -54,7 +56,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {
     const {
         'aria-labelledby': propAriaLabelledBy,
         ariaLabelledBy = propAriaLabelledBy,
@@ -158,11 +160,13 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     />
                 </div>
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                    {children}
-                </div>
-            </ClickAwayProvider>
+            <ThemeProvider value={undefined}>
+                <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                    <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                        {children}
+                    </div>
+                </ClickAwayProvider>
+            </ThemeProvider>
         </div>,
         document.body,
     );

package/src/components/link/Link.tsx

@@ -1,13 +1,14 @@
-import React, { forwardRef, RefObject, useMemo } from 'react';
+import React, { RefObject, useMemo } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
 import { ColorPalette, ColorVariant, Icon, Size, Typography } 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 { renderLink } from '@lumx/react/utils/renderLink';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -82,7 +83,7 @@ const getIconSize = (typography?: Typography) => {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {
+export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
     const {
         children,
         className,

package/src/components/link-preview/LinkPreview.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 { Thumbnail } from '@lumx/react';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
@@ -15,10 +15,10 @@ type SetupProps = Partial<LinkPreviewProps>;
 /**
  * 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(<LinkPreview {...props} />);
+    render(<LinkPreview {...props} />, { wrapper });
     const linkPreview = getByClassName(document.body, CLASSNAME);
     const thumbnail = queryByClassName(linkPreview, Thumbnail.className as string);
     const title = queryByClassName(linkPreview, `${CLASSNAME}__title`);
@@ -97,5 +97,11 @@ describe(`<${LinkPreview.displayName}>`, () => {
         forwardClassName: 'linkPreview',
         forwardAttributes: 'linkPreview',
         forwardRef: 'linkPreview',
+        applyTheme: {
+            affects: [{ element: 'linkPreview' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/link-preview/LinkPreview.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -14,8 +14,10 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HeadingElement, 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.
@@ -54,7 +56,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS = {
     size: Size.regular,
-    theme: Theme.light,
     titleHeading: 'h2',
 } as const;
 
@@ -65,7 +66,8 @@ const DEFAULT_PROPS = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         className,
         description,
@@ -73,7 +75,7 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
         linkAs,
         linkProps,
         size,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         title,
         titleHeading,

package/src/components/list/List.tsx

@@ -1,12 +1,14 @@
-import { Size } from '@lumx/react';
+import React, { Key, ReactNode, SyntheticEvent, useRef } from 'react';
+
+import classNames from 'classnames';
 
+import { Size } from '@lumx/react';
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-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 classNames from 'classnames';
-import React, { forwardRef, Key, ReactNode, SyntheticEvent, useRef } from 'react';
 import { useInteractiveList } from './useInteractiveList';
 
 /**
@@ -59,7 +61,7 @@ const DEFAULT_PROPS: Partial<ListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
+const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
     const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
     const listElementRef = useRef<HTMLUListElement>(null);
 

package/src/components/list/ListDivider.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.
@@ -27,7 +28,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListDivider: Comp<ListDividerProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {
     const { className, ...forwardedProps } = props;
 
     return (

package/src/components/list/ListItem.tsx

@@ -1,13 +1,14 @@
-import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -74,7 +75,7 @@ export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) => {
     const {
         after,
         before,

package/src/components/list/ListSubheader.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.
@@ -30,7 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement> = forwardRef((props, ref) => {
+export const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

package/src/components/message/Message.tsx

@@ -1,9 +1,12 @@
+import React, { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Emphasis, Icon, IconButton, 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 classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -57,7 +60,7 @@ const CONFIG = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {
     const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;
     const { color, icon } = CONFIG[kind as Kind] || {};
     const { onClick, label: closeButtonLabel } = closeButtonProps || {};

package/src/components/mosaic/Mosaic.test.tsx

@@ -4,14 +4,14 @@ import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Thumbnail } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import range from 'lodash/range';
 import userEvent from '@testing-library/user-event';
 
 const CLASSNAME = Mosaic.className as string;
 
-const setup = (props: Partial<MosaicProps> = {}) => {
-    render(<Mosaic thumbnails={[]} {...props} />);
+const setup = (props: Partial<MosaicProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<Mosaic thumbnails={[]} {...props} />, { wrapper });
     const mosaic = getByClassName(document.body, CLASSNAME);
     const thumbnails = queryAllByClassName(mosaic, Thumbnail.className as string);
     const overlay = queryByClassName(mosaic, `${CLASSNAME}__overlay`);
@@ -69,5 +69,11 @@ describe(`<${Mosaic.displayName}>`, () => {
         forwardClassName: 'mosaic',
         forwardAttributes: 'mosaic',
         forwardRef: 'mosaic',
+        applyTheme: {
+            affects: [{ element: 'mosaic' }, { element: 'thumbnails' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/mosaic/Mosaic.tsx

@@ -1,10 +1,13 @@
-import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
-import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
+import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
+import { GenericProps, HasTheme } 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.
@@ -29,9 +32,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<MosaicProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<MosaicProps> = {};
 
 /**
  * Mosaic component.
@@ -40,8 +41,9 @@ const DEFAULT_PROPS: Partial<MosaicProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, thumbnails, onImageClick, ...forwardedProps } = props;
+export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;
     const handleImageClick = useMemo(() => {
         if (!onImageClick) return undefined;
 

package/src/components/navigation/Navigation.test.tsx

@@ -1,8 +1,8 @@
 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 } from '@lumx/react/testing/utils/queries';
+import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';
 import { Navigation, NavigationProps } from '.';
 import { Orientation } from '..';
 
@@ -14,7 +14,7 @@ type SetupProps = Partial<NavigationProps>;
  * 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 = { 'aria-label': 'navigation', ...propsOverride } as any;
     const { container } = render(
         <Navigation {...props}>
@@ -22,13 +22,12 @@ const setup = (propsOverride: SetupProps = {}) => {
             <Navigation.Item label="A link" as="button" />
             <Navigation.Item label="A link" href="" />
         </Navigation>,
+        { wrapper },
     );
 
-    return {
-        container,
-        element: getByClassName(container, CLASSNAME),
-        props,
-    };
+    const element = getByClassName(container, CLASSNAME);
+    const items = getAllByClassName(element, Navigation.Item.className as string);
+    return { container, element, items, props };
 };
 
 describe(`<${Navigation.displayName}>`, () => {
@@ -54,5 +53,15 @@ describe(`<${Navigation.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }, { element: 'items' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/navigation/Navigation.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Orientation, Theme } from '@lumx/react';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { NavigationSection } from './NavigationSection';
 import { NavigationItem } from './NavigationItem';
 import { NavigationContext } from './context';
@@ -26,12 +26,20 @@ const COMPONENT_NAME = 'Navigation';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS = {
+    orientation: Orientation.vertical,
+};
+
 export const Navigation = Object.assign(
     // eslint-disable-next-line react/display-name
     forwardRef<HTMLElement, NavigationProps>((props, ref) => {
-        const { children, className, theme, orientation, ...forwardedProps } = props;
+        const defaultTheme = useTheme() || Theme.light;
+        const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
         return (
-            <ThemeContext.Provider value={theme}>
+            <ThemeProvider value={theme}>
                 <nav
                     className={classNames(
                         className,
@@ -48,13 +56,13 @@ export const Navigation = Object.assign(
                         <ul className={`${CLASSNAME}__list`}>{children}</ul>
                     </NavigationContext.Provider>
                 </nav>
-            </ThemeContext.Provider>
+            </ThemeProvider>
         );
     }),
     {
         displayName: COMPONENT_NAME,
         className: CLASSNAME,
-        defaultProps: { theme: Theme.light, orientation: Orientation.vertical },
+        defaultProps: DEFAULT_PROPS,
         // Sub components
         Section: NavigationSection,
         Item: NavigationItem,

package/src/components/navigation/NavigationItem.tsx

@@ -1,10 +1,10 @@
-import React, { ElementType, ReactNode, useContext } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
-import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
-import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 
 type BaseNavigationItemProps = {
@@ -41,7 +41,7 @@ export const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
-        const theme = useContext(ThemeContext);
+        const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
 
         const buttonProps = Element === 'button' ? { type: 'button' } : {};

package/src/components/navigation/NavigationSection.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, RenderWrapper } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
@@ -17,7 +17,10 @@ type SetupProps = Partial<NavigationSectionProps>;
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
 
-const setup = (propsOverride: SetupProps = {}, orientation: Orientation = Orientation.vertical) => {
+const setup = (
+    propsOverride: SetupProps = {},
+    { orientation = Orientation.vertical, wrapper }: { orientation?: Orientation; wrapper?: RenderWrapper } = {},
+) => {
     const props = { label: 'Section 1', ...propsOverride };
     const { container } = render(
         <NavigationContext.Provider value={{ orientation }}>
@@ -27,6 +30,7 @@ const setup = (propsOverride: SetupProps = {}, orientation: Orientation = Orient
                 <NavigationItem label="A community" href="" />
             </NavigationSection>
         </NavigationContext.Provider>,
+        { wrapper },
     );
 
     const query = {
@@ -62,7 +66,7 @@ describe(`<${NavigationSection.displayName}>`, () => {
     });
 
     it('should be closed by default in horizontal mode', () => {
-        const { element, query } = setup({}, Orientation.horizontal);
+        const { element, query } = setup({}, { orientation: Orientation.horizontal });
         expect(element).toBeInTheDocument();
         expect(element).toHaveClass(CLASSNAME);
         // Section is visible
@@ -91,7 +95,7 @@ describe(`<${NavigationSection.displayName}>`, () => {
     });
 
     it('should be in a popover and toggle on click in horizontal mode', async () => {
-        const { query } = setup({}, Orientation.horizontal);
+        const { query } = setup({}, { orientation: Orientation.horizontal });
         // Content is not visible
         expect(query.popover()).not.toBeInTheDocument();
         // click to open
@@ -109,7 +113,7 @@ describe(`<${NavigationSection.displayName}>`, () => {
     });
 
     it('should also toggle on click away in horizontal mode', async () => {
-        const { query } = setup({}, Orientation.horizontal);
+        const { query } = setup({}, { orientation: Orientation.horizontal });
         // Content is not visible
         expect(query.popover()).not.toBeInTheDocument();
         // click to open
@@ -121,5 +125,14 @@ describe(`<${NavigationSection.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'button' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'button',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: false,
+            viaContext: true,
+        },
+    });
 });