@lumx/react 3.19.0 → 3.19.1-alpha.1

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -6,11 +6,10 @@ import isEmpty from 'lodash/isEmpty';
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
-import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 /**
  * Defines the props of the component.
@@ -113,17 +112,15 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         >
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {renderLink(
-                        {
-                            linkAs,
-                            ...linkProps,
-                            className: `${CLASSNAME}__link`,
-                            onClick,
-                            tabIndex: 0,
-                        },
-                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                        <span>{label}</span>,
-                    )}
+                    <RawClickable
+                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                        {...(linkProps as any)}
+                        className={`${CLASSNAME}__link`}
+                        onClick={onClick}
+                    >
+                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                        <span>{label}</span>
+                    </RawClickable>
 
                     <IconButton
                         {...toggleButtonProps}
@@ -136,25 +133,23 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                     />
                 </div>
             ) : (
-                renderButtonOrLink(
-                    {
-                        linkAs,
-                        ...linkProps,
-                        className: `${CLASSNAME}__link`,
-                        tabIndex: 0,
-                        onClick,
-                        ...ariaProps,
-                    },
-                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                    <span>{label}</span>,
-                    hasContent && (
+                <RawClickable
+                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                    {...linkProps}
+                    className={`${CLASSNAME}__link`}
+                    onClick={onClick}
+                    {...ariaProps}
+                >
+                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                    <span>{label}</span>
+                    {hasContent && (
                         <Icon
                             className={`${CLASSNAME}__chevron`}
                             icon={isOpen ? mdiChevronUp : mdiChevronDown}
                             size={Size.xs}
                         />
-                    ),
-                )
+                    )}
+                </RawClickable>
             )}
 
             {(closeMode === 'hide' || showChildren) && (

package/src/components/skeleton/SkeletonCircle.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/skeleton/SkeletonTypography.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/slider/Slider.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { clamp } from '@lumx/react/utils/number/clamp';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/slideshow/Slides.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/slideshow/SlideshowControls.tsx

@@ -6,7 +6,7 @@ import range from 'lodash/range';
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';

package/src/components/slideshow/SlideshowItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 

package/src/components/switch/Switch.tsx

@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/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';

package/src/components/table/Table.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/table/TableBody.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableCell.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 import { Icon, Size } from '@lumx/react';
 import { GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/table/TableRow.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 

package/src/components/tabs/Tab.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Icon, IconProps, Size, Text } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';

package/src/components/tabs/TabList.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/tabs/TabPanel.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/text/Text.tsx

@@ -9,7 +9,7 @@ import {
     getRootClassName,
     handleBasicClasses,
     getTypographyClassName,
-} from '@lumx/react/utils/className';
+} from '@lumx/core/js/utils/className';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { getBasicClass } from '@lumx/core/js/utils/className';
 import { render } from '@testing-library/react';
 import {
     getByClassName,

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

@@ -17,7 +17,7 @@ import {
     Theme,
 } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
@@ -28,8 +28,19 @@ describe(`<${Thumbnail.displayName}>`, () => {
         },
     });
 
-    describe('disabled state', () => {
-        it('should not be clickable when disabled from context', () => {
+    describe('clickable button', () => {
+        it('should render clickable button', async () => {
+            const onClick = jest.fn();
+            const { thumbnail } = setup({ onClick, alt: 'Name' });
+            const button = screen.getByRole('button', { name: 'Name' });
+            expect(button).toBe(thumbnail);
+            expect(button).toHaveAttribute('type', 'button');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should not render button in disabled context', () => {
             const onClick = jest.fn();
             const { thumbnail, container } = setup(
                 { onClick, 'aria-label': 'thumbnail' },
@@ -47,8 +58,21 @@ describe(`<${Thumbnail.displayName}>`, () => {
             fireEvent.click(thumbnail as HTMLElement);
             expect(onClick).not.toHaveBeenCalled();
         });
+    });
+
+    describe('clickable link', () => {
+        it('should render clickable link', async () => {
+            const onClick = jest.fn((evt) => evt.preventDefault());
+            const { thumbnail } = setup({ linkProps: { href: '#' }, onClick, alt: 'Name' });
+            const link = screen.getByRole('link', { name: 'Name' });
+            expect(link).toBe(thumbnail);
+            expect(link).toHaveAttribute('href', '#');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
 
-        it('should have no href when disabled from context', () => {
+        it('should not render link in disabled context', () => {
             const { container, thumbnail } = setup(
                 { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
                 {

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
 import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
@@ -22,6 +22,7 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -100,7 +101,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
-    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -150,18 +151,16 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         imageErrorStyle.display = 'none';
     }
 
-    const isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = !isAnyDisabled && (isButton || isLink);
+    const isLink = linkProps?.href || linkAs;
+    const isClickable = !isAnyDisabled && (isLink || forwardedProps.onClick);
 
-    let Wrapper: any = 'div';
+    const Wrapper: any = isClickable ? RawClickable : 'div';
     const wrapperProps = { ...forwardedProps };
-    if (!isAnyDisabled && isLink) {
-        Wrapper = linkAs || 'a';
-        Object.assign(wrapperProps, linkProps);
-    } else if (!isAnyDisabled && isButton) {
-        Wrapper = 'button';
-        wrapperProps.type = forwardedProps.type || 'button';
+    if (isClickable) {
+        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);
+        if (isLink) {
+            Object.assign(wrapperProps, linkProps);
+        }
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react';
-import { AspectRatio } from '@lumx/react/components';
+import { AspectRatio } from '@lumx/core/js/constants';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
 import { RectSize } from '@lumx/react/utils/type';
 

package/src/components/toolbar/Toolbar.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';

package/src/components/uploader/Uploader.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

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

@@ -6,7 +6,7 @@ import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/hooks/useCallbackOnEscape.ts

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@lumx/react/constants';
 import { Callback } from '@lumx/react/utils/type';
-import { onEscapePressed } from '@lumx/react/utils/browser/event';
+import { onEscapePressed } from '@lumx/core/js/utils';
 import { useEffect } from 'react';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 

package/src/index.ts

@@ -2,7 +2,9 @@
  * Components listed here will be exposed to NPM in '@lumx/react'.
  */
 
-export * from './components';
+export * from '@lumx/core/js/constants';
+export * from '@lumx/core/js/types';
+
 export * from './components/alert-dialog';
 export * from './components/autocomplete';
 export * from './components/avatar';

package/src/utils/partitionMulti.ts

@@ -3,7 +3,8 @@ import dropRight from 'lodash/dropRight';
 import last from 'lodash/last';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { Predicate } from './type';
+
+import { Predicate } from '@lumx/core/js/types';
 
 /**
  * Similar to lodash `partition` function but working with multiple predicates.

package/src/utils/react/RawClickable.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RawClickable, RawClickableProps } from './RawClickable';
+import { CustomLink } from '../../stories/utils/CustomLink';
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests.
+ */
+const setup = (props: RawClickableProps<any>) => {
+    render(<RawClickable {...props} data-testid="raw-element" />);
+    const element = screen.getByTestId('raw-element');
+    return { props, element };
+};
+
+describe(`<RawClickable>`, () => {
+    describe('as a button', () => {
+        it('should render a button by default', () => {
+            const { element } = setup({ as: 'button', children: 'Click me' });
+            expect(element.tagName).toBe('BUTTON');
+            expect(element).toHaveAttribute('type', 'button');
+            expect(screen.getByRole('button', { name: 'Click me' })).toBe(element);
+        });
+
+        it('should trigger onClick', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'button', children: 'Click me', onClick });
+            await userEvent.click(element);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        it('should be disabled with `disabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'button', children: 'Click me', onClick, disabled: true });
+            expect(element).toBeDisabled();
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with `isDisabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'button', children: 'Click me', onClick, isDisabled: true });
+            expect(element).toBeDisabled();
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should be aria-disabled with `aria-disabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'button', children: 'Click me', onClick, 'aria-disabled': true });
+            expect(element).not.toBeDisabled();
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('as a link', () => {
+        const href = 'https://example.com';
+
+        it('should render a link with `href` prop', () => {
+            const { element } = setup({ as: 'a', children: 'Click me', href });
+            expect(element.tagName).toBe('A');
+            expect(element).toHaveAttribute('href', href);
+            expect(screen.getByRole('link', { name: 'Click me' })).toBe(element);
+        });
+
+        it('should trigger onClick', async () => {
+            const onClick = jest.fn((evt) => evt.preventDefault());
+            const { element } = setup({ as: 'a', children: 'Click me', href, onClick });
+            await userEvent.click(element);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        it('should be disabled with `disabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, disabled: true });
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+            expect(element).toHaveAttribute('tabindex', '-1');
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with `isDisabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, isDisabled: true });
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+            expect(element).toHaveAttribute('tabindex', '-1');
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should be aria-disabled with `aria-disabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: 'a', children: 'Click me', href, onClick, 'aria-disabled': true });
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('as a custom component', () => {
+        it('should render a custom component with `linkAs` prop', () => {
+            const { element } = setup({ as: CustomLink, children: 'Click me' });
+            expect(element).toHaveAttribute('data-custom-link');
+        });
+
+        it('should trigger onClick', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: CustomLink, children: 'Click me', onClick });
+            expect(element).toHaveAttribute('data-custom-link');
+            await userEvent.click(element);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        it('should be disabled with `disabled` prop', async () => {
+            const onClick = jest.fn();
+            const { element } = setup({ as: CustomLink, children: 'Click me', onClick, disabled: true });
+            expect(element).toHaveAttribute('data-custom-link');
+            expect(element).toHaveAttribute('aria-disabled', 'true');
+            expect(element).toHaveAttribute('tabindex', '-1');
+            await userEvent.click(element);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('prop forwarding', () => {
+        it('should forward className', () => {
+            const { element } = setup({ as:'button', className: 'foo bar' });
+            expect(element).toHaveClass('foo bar');
+        });
+
+        it('should forward ref and override type in button', () => {
+            const ref = React.createRef<HTMLButtonElement>();
+            const { element } = setup({ as: 'button', ref, type: 'submit' });
+            expect(element).toHaveAttribute('type', 'submit');
+            expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+        });
+
+        it('should forward ref and override tabindex in link', () => {
+            const ref = React.createRef<HTMLAnchorElement>();
+            const { element } = setup({ as: 'a', ref, href: '#', tabIndex: -1 });
+            expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+            expect(element).toHaveAttribute('tabindex', '-1');
+        });
+
+        it('should forward ref to custom component', () => {
+            const ref = React.createRef<HTMLAnchorElement>();
+            setup({ as: CustomLink, ref });
+            expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+        });
+    });
+});