@lumx/react 3.19.1-alpha.7 → 3.19.1-alpha.8

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 = 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

@@ -0,0 +1,65 @@
+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

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

package/src/utils/type/index.ts

@@ -6,3 +6,4 @@ export type { HasPolymorphicAs } from './HasPolymorphicAs';
 export { isComponent } from './isComponent';
 export { isComponentType } from './isComponentType';
 export type { MaybeElementOrRef } from './MaybeElementOrRef';
+export type { HasRequiredLinkHref } from './HasRequiredLinkHref';

package/utils/index.d.ts

@@ -71,7 +71,7 @@ type DisabledStateProviderProps = DisabledStateContextValue & {
  * Disabled state provider.
  * All nested LumX Design System components inherit this disabled state.
  */
-declare function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps): JSX.Element;
+declare function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps): React.JSX.Element;
 /**
  * Get DisabledState context value
  */

package/utils/index.js

@@ -1,2 +1,2 @@
-export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, b as PortalProvider, u as useDisabledStateContext } from '../_internal/index.js';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, c as PortalProvider, u as useDisabledStateContext } from '../_internal/index.js';
 //# sourceMappingURL=index.js.map

package/src/utils/react/renderButtonOrLink.tsx

@@ -1,16 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { renderLink } from './renderLink';
-
-interface Props {
-    linkAs?: any;
-    href?: any;
-}
-
-/**
- * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
- */
-export const renderButtonOrLink = <P extends Props>(props: P, ...children: ReactNode[]): ReactElement => {
-    const { linkAs, href, ...forwardedProps } = props;
-    if (linkAs || href) return renderLink(props, ...children);
-    return React.createElement('button', { type: 'button', ...forwardedProps }, ...children);
-};