@lumx/react 3.10.1-alpha.0 → 3.10.1-alpha.2

package/src/components/slideshow/SlideshowControls.tsx

@@ -1,15 +1,16 @@
-import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
+import React, { RefObject, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, 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 { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useSwipeNavigate } from './useSwipeNavigate';
@@ -80,7 +81,7 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> = forwardRef((props, ref) => {
+const InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,

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

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-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';
+
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**
@@ -35,7 +36,7 @@ export const buildSlideShowGroupId = (slidesId: string, index: number) => `${sli
  * @param  ref   Component ref.
  * @return React element.
  */
-export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivElement>((props, ref) => {
     const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
     const groupRef = React.useRef<HTMLDivElement>(null);
 

package/src/components/switch/Switch.tsx

@@ -1,15 +1,14 @@
-import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent } from 'react';
+import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
-
 import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, 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 { 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.
@@ -57,7 +56,7 @@ const DEFAULT_PROPS: Partial<SwitchProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         checked,

package/src/components/table/Table.tsx

@@ -1,12 +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.
@@ -40,7 +40,7 @@ const DEFAULT_PROPS: Partial<TableProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {
+export const Table = forwardRef<TableProps, HTMLTableElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const { children, className, hasBefore, hasDividers, theme = defaultTheme, ...forwardedProps } = props;
 

package/src/components/table/TableBody.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, true);
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

package/src/components/table/TableCell.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
+import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { GenericProps, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
  * Table head cell sort order.
@@ -60,7 +60,7 @@ const DEFAULT_PROPS: Partial<TableCellProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {
+export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props, ref) => {
     const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;
 
     // Use button if clickable

package/src/components/table/TableHeader.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.
@@ -32,7 +33,7 @@ const DEFAULT_PROPS: Partial<TableHeaderProps> = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {
+export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>((props, ref) => {
     const { children, className, ...forwardedProps } = props;
 
     return (

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.tsx

@@ -1,12 +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 classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
@@ -55,7 +58,7 @@ const DEFAULT_PROPS: Partial<TabListProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
+export const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         'aria-label': ariaLabel,

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.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,11 +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.
@@ -254,7 +255,7 @@ 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,

package/src/components/thumbnail/Thumbnail.tsx

@@ -1,6 +1,5 @@
 import React, {
     CSSProperties,
-    forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
     MouseEventHandler,
@@ -9,18 +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>;
@@ -98,7 +98,7 @@ 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,

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.tsx

@@ -1,12 +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.
@@ -76,7 +78,7 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @param  ref   Component ref.
  * @return React element.
  */
-export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
+export const Uploader = forwardRef<UploaderProps>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
         aspectRatio,

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

@@ -1,11 +1,13 @@
-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';
@@ -72,7 +74,7 @@ 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,

package/src/testing/utils/commonTestsSuiteRTL.tsx

@@ -33,7 +33,8 @@ interface Options<S extends CommonSetup> {
     };
 }
 
-export type SetupRenderOptions = { wrapper?: RenderOptions['wrapper'] };
+export type RenderWrapper = RenderOptions['wrapper'];
+export type SetupRenderOptions = { wrapper?: RenderWrapper };
 export type SetupFunction<S extends CommonSetup> = (
     props?: GenericProps,
     options?: SetupRenderOptions,

package/src/utils/react/forwardRef.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode, type ForwardedRef } from 'react';
+import type { Comp } from '../type';
+
+type ForwardRef = <P, T = HTMLElement>(render: (props: P, ref: ForwardedRef<T>) => ReactNode) => Comp<P, T>;
+
+/**
+ * React.forwardRef but re-typed to attach some custom metadata on our components.
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export const forwardRef = React.forwardRef as ForwardRef;

package/src/utils/react/forwardRefPolymorphic.ts

@@ -0,0 +1,10 @@
+import React, { type ElementType } from 'react';
+import type { ComponentRef } from '@lumx/react/utils/type';
+
+type ForwardRefPolymorphic = <E extends ElementType, P extends { as?: E }>(
+    render: (props: P, ref: ComponentRef<E>) => React.ReactNode,
+) => (props: P & { ref?: ComponentRef<E> }) => React.ReactNode;
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+/*#__NO_SIDE_EFFECTS__*/
+export const forwardRefPolymorphic = React.forwardRef as ForwardRefPolymorphic;

package/utils/index.d.ts

@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react';
-import { F as Falsy } from '../_internal/index.js';
+import { F as Falsy } from '../_internal/8d67e1e3.js';
 
 interface ClickAwayParameters {
     /**

package/src/utils/forwardRefPolymorphic.ts

@@ -1,9 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentRef } from '@lumx/react/utils/type';
-
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-export function forwardRefPolymorphic<E extends ElementType, P extends { as?: E }>(
-    render: (props: P, ref: ComponentRef<E>) => React.ReactElement | null,
-): (props: P & { ref?: ComponentRef<E> }) => React.ReactElement | null {
-    return React.forwardRef(render as any) as any;
-}