@lumx/react 3.19.1-alpha.1 → 3.19.1-alpha.11

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

@@ -23,14 +23,14 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should trigger onClick', async () => {
-            const onClick = jest.fn();
+            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 = jest.fn();
+            const onClick = vi.fn();
             const { element } = setup({ as: 'button', children: 'Click me', onClick, disabled: true });
             expect(element).toBeDisabled();
             await userEvent.click(element);
@@ -38,7 +38,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should be disabled with `isDisabled` prop', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { element } = setup({ as: 'button', children: 'Click me', onClick, isDisabled: true });
             expect(element).toBeDisabled();
             await userEvent.click(element);
@@ -46,7 +46,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should be aria-disabled with `aria-disabled` prop', async () => {
-            const onClick = jest.fn();
+            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');
@@ -66,14 +66,14 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should trigger onClick', async () => {
-            const onClick = jest.fn((evt) => evt.preventDefault());
+            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 = jest.fn();
+            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');
@@ -82,7 +82,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should be disabled with `isDisabled` prop', async () => {
-            const onClick = jest.fn();
+            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');
@@ -91,7 +91,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should be aria-disabled with `aria-disabled` prop', async () => {
-            const onClick = jest.fn();
+            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);
@@ -106,7 +106,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should trigger onClick', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { element } = setup({ as: CustomLink, children: 'Click me', onClick });
             expect(element).toHaveAttribute('data-custom-link');
             await userEvent.click(element);
@@ -114,7 +114,7 @@ describe(`<RawClickable>`, () => {
         });
 
         it('should be disabled with `disabled` prop', async () => {
-            const onClick = jest.fn();
+            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');
@@ -126,7 +126,7 @@ describe(`<RawClickable>`, () => {
 
     describe('prop forwarding', () => {
         it('should forward className', () => {
-            const { element } = setup({ as:'button', className: 'foo bar' });
+            const { element } = setup({ as: 'button', className: 'foo bar' });
             expect(element).toHaveClass('foo bar');
         });
 

package/src/utils/react/RawClickable.tsx

@@ -46,7 +46,7 @@ export const RawClickable = forwardRefPolymorphic(
         return (
             <Component
                 ref={ref}
-                aria-disabled={isAnyDisabled}
+                aria-disabled={isAnyDisabled || undefined}
                 {...forwardedProps}
                 {...clickableProps}
                 onClick={(event: any) => {

package/src/utils/react/renderLink.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+interface Props {
+    linkAs?: any;
+}
+
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+export const renderLink = <P extends Props>({ linkAs, ...forwardedProps }: P, ...children: ReactNode[]): ReactElement =>
+    React.createElement(linkAs || 'a', forwardedProps, ...children);