@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.21

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { MockInstance } from 'vitest';
 import { Button } from '@lumx/react';
 import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -12,13 +13,18 @@ import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 // Skip delays
-jest.mock('@lumx/react/constants', () => ({
-    ...jest.requireActual('@lumx/react/constants'),
-    TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
-}));
+vi.mock('@lumx/react/constants', async (importActual) => {
+    const actual = (await importActual()) as Record<string, any>;
+    return {
+        ...actual,
+        TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
+        VISUALLY_HIDDEN: actual.VISUALLY_HIDDEN,
+        CSS_PREFIX: actual.CSS_PREFIX,
+    };
+});
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -346,7 +352,7 @@ describe(`<${Tooltip.displayName}>`, () => {
         });
 
         it('should activate on anchor focus visible and close on escape', async () => {
-            (isFocusVisible as jest.Mock).mockReturnValue(true);
+            (isFocusVisible as unknown as MockInstance).mockReturnValue(true);
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,
@@ -381,7 +387,7 @@ describe(`<${Tooltip.displayName}>`, () => {
         });
 
         it('should not activate on anchor focus if not visible', async () => {
-            (isFocusVisible as jest.Mock).mockReturnValue(false);
+            (isFocusVisible as unknown as MockInstance).mockReturnValue(false);
             let { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,

package/src/components/uploader/Uploader.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';
@@ -89,9 +87,9 @@ describe(`<${Uploader.displayName}>`, () => {
         ${'button'}               | ${{}}
         ${'button isDisabled   '} | ${{ isDisabled: true }}
         ${'button aria-disabled'} | ${{ 'aria-disabled': true }}
-        ${'file input          '} | ${{ fileInputProps: { onChange: jest.fn() } }}
+        ${'file input          '} | ${{ fileInputProps: { onChange: vi.fn() } }}
     `('Events $name', ({ props }) => {
-        const onClick = jest.fn();
+        const onClick = vi.fn();
         beforeEach(() => onClick.mockClear());
         const assertClick = () => {
             if (props.isDisabled || props['aria-disabled']) {

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

@@ -1,6 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
-
 import { mdiMenuDown, mdiStar } from '@lumx/icons';
 import { Badge, ColorPalette, Icon, IconButton, Link, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -36,7 +34,7 @@ describe(`<${UserBlock.displayName}>`, () => {
         });
 
         it('should render button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { name, thumbnail } = setup({
                 onClick,
                 name: 'John Doe',

package/src/hooks/useId.test.tsx

@@ -1,6 +1,5 @@
 import { useId } from '@lumx/react/hooks/useId';
 import { render } from '@testing-library/react';
-import React from 'react';
 
 function setup() {
     const Component = (): any => useId();

package/src/hooks/useInfiniteScroll.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 type useInfiniteScrollType = (
     ref: React.RefObject<HTMLElement>,

package/src/hooks/usePreviousValue.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-
 /**
  * Returns the value from the previous render.
  */

package/src/stories/decorators/withChromaticForceScreenSize.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
 
 /** Story decorator used to force a minimum screen size when running in chromatic */

package/src/stories/decorators/withNestedProps.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import set from 'lodash/set';
 
 /**

package/src/stories/decorators/withThemedBackground.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const LIGHT_BACKGROUND_COLOR = '#EEE';
 const DARK_BACKGROUND_COLOR = '#333';
 

package/src/stories/decorators/withWrapper.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 /**
  * SB decorator adding a wrapping div around the story
  */

package/src/stories/utils/CustomLink.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 /**
  * Example custom link that can be used in linkAs props.
  */

package/src/testing/utils/ThemeSentinel.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 const TEST_ID = 'theme-sentinel';

package/src/untypped-modules.d.ts

@@ -1,3 +1,7 @@
+// Extend CSSStyleDeclaration to support viewTransitionName for view transitions
+interface CSSStyleDeclaration {
+    viewTransitionName: string | null;
+}
 /**
  * List untypped modules here to declare them as explicit any.
  */

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
 interface ContextValue {

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Switch } from '@lumx/react/components/switch';
 import { Alignment } from '@lumx/react';
 

package/src/utils/Portal/Portal.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Portal } from './Portal';
 

package/src/utils/Portal/PortalProvider.stories.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@lumx/react';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
 import { PortalProvider } from './PortalProvider';

package/src/utils/Portal/PortalProvider.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PortalInit, PortalProvider } from './PortalProvider';
 import { Portal } from './Portal';
@@ -30,7 +29,7 @@ describe('PortalProvider', () => {
     });
 
     it('should call teardown on unmount', () => {
-        const teardownMock = jest.fn();
+        const teardownMock = vi.fn();
         const portalContainer = document.createElement('div');
         portalContainer.id = PORTAL_CONTAINER_ID;
         document.body.appendChild(portalContainer);

package/src/utils/date/getYearDisplayName.test.ts

@@ -4,7 +4,7 @@ describe(getYearDisplayName, () => {
     beforeEach(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        jest.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
+        vi.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
             resolvedOptions: () => ({
                 fallback: 'code',
                 locale: 'fr',

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
     Button,
     Checkbox,

package/src/utils/disabled/useDisableStateProps.test.tsx

@@ -59,14 +59,14 @@ describe(useDisableStateProps.name, () => {
     });
 
     it('should forward onClick when not disabled', () => {
-        const onClick = jest.fn();
+        const onClick = vi.fn();
         const { element } = setup({ onClick });
         fireEvent.click(element);
         expect(onClick).toHaveBeenCalled();
     });
 
     it('should not forward onClick when disabled', () => {
-        const onClick = jest.fn();
+        const onClick = vi.fn();
         const { element } = setup({ disabled: true, onClick });
         fireEvent.click(element);
         expect(onClick).not.toHaveBeenCalled();

package/src/utils/react/OnBeforeUnmount.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 /**
  * Helper component using useLayoutEffect to trigger a callback on before unmount.

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 { 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/react/skipRender.tsx

@@ -1,7 +1,7 @@
-import { DOCUMENT } from '@lumx/react/constants';
-import type { Comp } from '@lumx/react/utils/type';
 import React from 'react';
 
+import { DOCUMENT } from '@lumx/react/constants';
+import type { Comp } from '@lumx/react/utils/type';
 /**
  * HOC component wrapping a component to skip render if predicate return falsy
  */

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import { Icon } from '@lumx/react';
 import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';

package/src/utils/type/HasPolymorphicAs.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
     /**
      * Customize the rendered 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

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React__default, { RefObject } from 'react';
 import { F as Falsy } from '../_internal/Falsy.js';
 
 interface ClickAwayParameters {
@@ -40,23 +40,23 @@ type PortalInit = () => {
     teardown?: () => void;
 };
 interface PortalProviderProps {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     value: PortalInit;
 }
 /**
  * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
  */
-declare const PortalProvider: React.FC<PortalProviderProps>;
+declare const PortalProvider: React__default.FC<PortalProviderProps>;
 
 interface PortalProps {
     enabled?: boolean;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
 /**
  * Render children in a portal outside the current DOM position
  * (defaults to `document.body` but can be customized with the PortalContextProvider)
  */
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: React__default.FC<PortalProps>;
 
 /** Disable state */
 type DisabledStateContextValue = {
@@ -65,7 +65,7 @@ type DisabledStateContextValue = {
     state: undefined | null;
 };
 type DisabledStateProviderProps = DisabledStateContextValue & {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 /**
  * Disabled state provider.

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);
-};