@lumx/react 3.10.0 → 3.10.1-alpha.1

package/src/components/chip/Chip.tsx

@@ -1,14 +1,16 @@
+import React, { MouseEventHandler, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-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 { onEnterPressed } from '@lumx/react/utils/event';
-
-import classNames from 'classnames';
-
-import isFunction from 'lodash/isFunction';
-import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Chip sizes.
@@ -56,7 +58,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<ChipProps> = {
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -66,7 +67,8 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
+export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         after,
         before,
@@ -82,7 +84,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
         onBeforeClick,
         onClick,
         size,
-        theme,
+        theme = defaultTheme,
         href,
         onKeyDown,
         ...forwardedProps
@@ -143,9 +145,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
                     {before}
                 </div>
             )}
-
             <div className={`${CLASSNAME}__label`}>{children}</div>
-
             {after && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div

package/src/components/chip/ChipGroup.tsx

@@ -1,10 +1,11 @@
-import { HorizontalAlignment } from '@lumx/react/components';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { HorizontalAlignment } from '@lumx/react/components';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
 
@@ -43,7 +44,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
     const chipGroupClassName = handleBasicClasses({
         prefix: CLASSNAME,

package/src/components/comment-block/CommentBlock.test.tsx

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

package/src/components/comment-block/CommentBlock.tsx

@@ -1,11 +1,13 @@
-import React, { Children, forwardRef, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } 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 { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -76,7 +78,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<CommentBlockProps> = {
-    theme: Theme.light,
     variant: CommentBlockVariant.indented,
 };
 
@@ -87,7 +88,8 @@ const DEFAULT_PROPS: Partial<CommentBlockProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         avatarProps,
@@ -104,7 +106,7 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
         onMouseEnter,
         onMouseLeave,
         text,
-        theme,
+        theme = defaultTheme,
         variant,
         ...forwardedProps
     } = props;
@@ -161,7 +163,6 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
                     {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
                 </div>
             </div>
-
             {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
         </div>
     );

package/src/components/date-picker/DatePicker.tsx

@@ -1,7 +1,9 @@
-import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils/type';
+import React, { useState } from 'react';
+
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 import { DatePickerControlled } from './DatePickerControlled';
 import { DatePickerProps } from './types';
@@ -13,7 +15,7 @@ import { DatePickerProps } from './types';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePicker = forwardRef<DatePickerProps, HTMLDivElement>((props, ref) => {
     const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
 
     let referenceDate = value || defaultMonth || new Date();

package/src/components/date-picker/DatePickerControlled.tsx

@@ -1,5 +1,7 @@
-import React, { KeyboardEventHandler, forwardRef } from 'react';
+import React, { KeyboardEventHandler } from 'react';
+
 import classNames from 'classnames';
+
 import {
     Button,
     DatePickerProps,
@@ -12,7 +14,6 @@ import {
     Toolbar,
 } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
@@ -24,6 +25,8 @@ import { onEnterPressed } from '@lumx/react/utils/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
 import { CLASSNAME } from './constants';
 
 /**
@@ -52,7 +55,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerControlled = forwardRef<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
     const {
         locale = getCurrentLocale(),
         maxDate,

package/src/components/date-picker/DatePickerField.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';
 import { TextField } from '@lumx/react';
@@ -15,7 +15,7 @@ jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
-const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
+const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
@@ -25,7 +25,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
         previousButtonProps: { label: 'Previous month' },
         ...propsOverride,
     };
-    render(<DatePickerField {...props} />);
+    render(<DatePickerField {...props} />, { wrapper });
     const textField = getByClassName(document.body, TextField.className as string);
     const inputNative = getByTagName(textField, 'input');
     const getDatePicker = () => queryByClassName(document.body, CLASSNAME);
@@ -62,5 +62,11 @@ describe(`<${DatePickerField.displayName}>`, () => {
         forwardRef: 'textField',
         forwardAttributes: 'inputNative',
         forwardClassName: 'textField',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/date-picker/DatePickerField.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef, SyntheticEvent, useCallback, useRef } from 'react';
+import React, { SyntheticEvent, useCallback, useRef } from 'react';
 
 import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { GenericProps } from '@lumx/react/utils/type';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -40,7 +41,7 @@ const COMPONENT_NAME = 'DatePickerField';
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>((props, ref) => {
     const {
         defaultMonth,
         disabled,

package/src/components/dialog/Dialog.test.tsx

@@ -3,19 +3,26 @@ import React from 'react';
 import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
 const CLASSNAME = Dialog.className as string;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<DialogProps> = {}) => {
-    render(<Dialog isOpen {...props} />);
+const setup = (props: Partial<DialogProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(
+        <Dialog isOpen {...props}>
+            {props.children || <ThemeSentinel />}
+        </Dialog>,
+        { wrapper },
+    );
     const dialog = queryByClassName(document.body, CLASSNAME);
     const container = dialog && queryByClassName(dialog, `${CLASSNAME}__container`);
-    return { props, dialog, container };
+    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
+    return { props, dialog, container, themeSentinel };
 };
 
 describe(`<${Dialog.displayName}>`, () => {
@@ -66,5 +73,11 @@ describe(`<${Dialog.displayName}>`, () => {
         forwardAttributes: 'dialog',
         forwardRef: 'dialog',
         forwardClassName: 'dialog',
+        applyTheme: {
+            // Theme should not affect the children components
+            affects: [{ not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: true,
+        },
     });
 });

package/src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -10,14 +10,16 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -91,7 +93,7 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
     if (!DOCUMENT) {
         // Can't render in SSR.
         return null;
@@ -208,65 +210,67 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
               >
                   <div className={`${CLASSNAME}__overlay`} />
 
-                  <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider
-                          callback={!shouldPreventCloseOnClickAway && onClose}
-                          childrenRefs={clickAwayRefs}
-                          parentRef={rootRef}
-                      >
-                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
-                              {(header || headerChildContent) && (
-                                  <header
-                                      {...headerChildProps}
-                                      className={classNames(
-                                          `${CLASSNAME}__header`,
-                                          (forceHeaderDivider || hasTopIntersection) &&
-                                              `${CLASSNAME}__header--has-divider`,
-                                          headerChildProps?.className,
-                                      )}
-                                  >
-                                      {header}
-                                      {headerChildContent}
-                                  </header>
-                              )}
-
-                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
-                                  <div
-                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
-                                      ref={setSentinelTop}
-                                  />
-
-                                  {content}
-
-                                  <div
-                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
-                                      ref={setSentinelBottom}
-                                  />
-                              </div>
-
-                              {(footer || footerChildContent) && (
-                                  <footer
-                                      {...footerChildProps}
-                                      className={classNames(
-                                          `${CLASSNAME}__footer`,
-                                          (forceFooterDivider || hasBottomIntersection) &&
-                                              `${CLASSNAME}__footer--has-divider`,
-                                          footerChildProps?.className,
-                                      )}
-                                  >
-                                      {footer}
-                                      {footerChildContent}
-                                  </footer>
-                              )}
-
-                              {isLoading && (
-                                  <div className={`${CLASSNAME}__progress-overlay`}>
-                                      <Progress variant={ProgressVariant.circular} />
+                  <ThemeProvider value={undefined}>
+                      <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
+                          <ClickAwayProvider
+                              callback={!shouldPreventCloseOnClickAway && onClose}
+                              childrenRefs={clickAwayRefs}
+                              parentRef={rootRef}
+                          >
+                              <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                  {(header || headerChildContent) && (
+                                      <header
+                                          {...headerChildProps}
+                                          className={classNames(
+                                              `${CLASSNAME}__header`,
+                                              (forceHeaderDivider || hasTopIntersection) &&
+                                                  `${CLASSNAME}__header--has-divider`,
+                                              headerChildProps?.className,
+                                          )}
+                                      >
+                                          {header}
+                                          {headerChildContent}
+                                      </header>
+                                  )}
+
+                                  <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
+                                      <div
+                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                          ref={setSentinelTop}
+                                      />
+
+                                      {content}
+
+                                      <div
+                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                          ref={setSentinelBottom}
+                                      />
                                   </div>
-                              )}
-                          </div>
-                      </ClickAwayProvider>
-                  </section>
+
+                                  {(footer || footerChildContent) && (
+                                      <footer
+                                          {...footerChildProps}
+                                          className={classNames(
+                                              `${CLASSNAME}__footer`,
+                                              (forceFooterDivider || hasBottomIntersection) &&
+                                                  `${CLASSNAME}__footer--has-divider`,
+                                              footerChildProps?.className,
+                                          )}
+                                      >
+                                          {footer}
+                                          {footerChildContent}
+                                      </footer>
+                                  )}
+
+                                  {isLoading && (
+                                      <div className={`${CLASSNAME}__progress-overlay`}>
+                                          <Progress variant={ProgressVariant.circular} />
+                                      </div>
+                                  )}
+                              </div>
+                          </ClickAwayProvider>
+                      </section>
+                  </ThemeProvider>
               </div>,
               document.body,
           )

package/src/components/divider/Divider.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 { Theme } from '@lumx/react';
 import { render, screen } from '@testing-library/react';
@@ -13,10 +13,10 @@ type SetupProps = Partial<DividerProps>;
 /**
  * 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: DividerProps = { ...propsOverride };
 
-    render(<Divider {...props} />);
+    render(<Divider {...props} />, { wrapper });
     const divider = screen.queryByRole('separator');
 
     return { props, divider };
@@ -43,5 +43,11 @@ describe(`<${Divider.displayName}>`, () => {
         forwardClassName: 'divider',
         forwardAttributes: 'divider',
         forwardRef: 'divider',
+        applyTheme: {
+            affects: [{ element: 'divider' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/divider/Divider.tsx

@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -24,9 +26,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<DividerProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<DividerProps> = {};
 
 /**
  * Divider component.
@@ -35,8 +35,9 @@ const DEFAULT_PROPS: Partial<DividerProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+export const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <hr

package/src/components/drag-handle/DragHandle.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { DragHandle, DragHandleProps } from './DragHandle';
+
+const CLASSNAME = DragHandle.className as string;
+
+type SetupProps = Partial<DragHandleProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: DragHandleProps = { ...propsOverride };
+
+    const { container } = render(<DragHandle {...props} />, { wrapper });
+    const handle = queryByClassName(container, CLASSNAME);
+
+    return { props, handle };
+};
+
+describe(`<${DragHandle.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'handle',
+        forwardAttributes: 'handle',
+        forwardRef: 'handle',
+        applyTheme: {
+            affects: [{ element: 'handle' }],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
+});

package/src/components/drag-handle/DragHandle.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, 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 { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -29,8 +31,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
+export const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const { className, theme = defaultTheme, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/dropdown/Dropdown.tsx

@@ -1,13 +1,14 @@
-import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';
+import React, { cloneElement, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Defines the props of the component.
@@ -113,7 +114,7 @@ const DEFAULT_PROPS: Partial<DropdownProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) => {
     const {
         anchorRef,
         children,