@lumx/react 3.20.0 → 3.20.1-alpha.1

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

@@ -1,153 +0,0 @@
-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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.fn((evt: any) => 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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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);
-        });
-    });
-});

package/src/utils/react/RawClickable.tsx

@@ -1,65 +0,0 @@
-import React, { AriaAttributes, ElementType } from 'react';
-import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
-import { ComponentRef, HasPolymorphicAs } from '@lumx/react/utils/type';
-import { HasRequiredLinkHref } from '@lumx/react/utils/type/HasRequiredLinkHref';
-
-type ClickableElement = 'a' | 'button' | ElementType;
-
-type BaseClickableProps<E extends ClickableElement> = {
-    children?: React.ReactNode;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    'aria-disabled'?: AriaAttributes['aria-disabled'];
-    onClick?: React.MouseEventHandler<E>;
-};
-
-export type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> &
-    HasRequiredLinkHref<E> &
-    BaseClickableProps<E>;
-
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-export const RawClickable = forwardRefPolymorphic(
-    <E extends ClickableElement>(props: RawClickableProps<E>, ref: ComponentRef<E>) => {
-        const {
-            children,
-            onClick,
-            disabled,
-            isDisabled = disabled,
-            'aria-disabled': ariaDisabled,
-            as,
-            ...forwardedProps
-        } = props;
-
-        const isAnyDisabled = isDisabled || ariaDisabled === 'true' || ariaDisabled === true;
-
-        const Component = as as any;
-        let clickableProps;
-        if (Component === 'button') {
-            clickableProps = { type: forwardedProps.type || 'button', disabled: isDisabled };
-        } else {
-            clickableProps = { tabIndex: isDisabled ? '-1' : forwardedProps.tabIndex };
-        }
-
-        return (
-            <Component
-                ref={ref}
-                aria-disabled={isAnyDisabled || undefined}
-                {...forwardedProps}
-                {...clickableProps}
-                onClick={(event: any) => {
-                    if (isAnyDisabled) {
-                        event.stopPropagation();
-                        event.preventDefault();
-                        return;
-                    }
-                    onClick?.(event);
-                }}
-            >
-                {children}
-            </Component>
-        );
-    },
-);

package/src/utils/type/HasRequiredLinkHref.ts

@@ -1 +0,0 @@
-export type HasRequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;