@lumx/react 3.19.1-alpha.0 → 3.19.1-alpha.10

package/src/components/navigation/NavigationItem.tsx

@@ -1,12 +1,11 @@
 import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -17,6 +16,9 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
+/** Make `href` required when `as` is `a` */
+type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
+
 /**
  * Navigation item props
  */
@@ -24,7 +26,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    HasRequiredLinkHref<E>;
+    RequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -42,6 +44,8 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
+        const buttonProps = Element === 'button' ? { type: 'button' } : {};
+
         return (
             <li
                 className={classNames(
@@ -53,14 +57,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <RawClickable
-                        as={Element}
+                    <Element
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
+                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -70,7 +74,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </RawClickable>
+                    </Element>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.tsx

@@ -9,7 +9,6 @@ import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -53,8 +52,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <RawClickable<'button'>
-                as="button"
+            <button
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -64,6 +62,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
+                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -74,7 +73,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </RawClickable>
+            </button>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

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

@@ -7,9 +7,10 @@ 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/core/js/utils/className';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
+import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
 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.
@@ -112,15 +113,17 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         >
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    <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>
+                    {renderLink(
+                        {
+                            linkAs,
+                            ...linkProps,
+                            className: `${CLASSNAME}__link`,
+                            onClick,
+                            tabIndex: 0,
+                        },
+                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
+                        <span>{label}</span>,
+                    )}
 
                     <IconButton
                         {...toggleButtonProps}
@@ -133,23 +136,25 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                     />
                 </div>
             ) : (
-                <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 && (
+                renderButtonOrLink(
+                    {
+                        linkAs,
+                        ...linkProps,
+                        className: `${CLASSNAME}__link`,
+                        tabIndex: 0,
+                        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/thumbnail/Thumbnail.tsx

@@ -22,7 +22,6 @@ 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>;
@@ -101,7 +100,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
-    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -151,12 +150,18 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         imageErrorStyle.display = 'none';
     }
 
-    const isClickable = !isAnyDisabled && (linkProps?.href || linkAs || forwardedProps.onClick);
+    const isLink = Boolean(linkProps?.href || linkAs);
+    const isButton = !!forwardedProps.onClick;
+    const isClickable = !isAnyDisabled && (isButton || isLink);
 
-    const Wrapper: any = isClickable ? RawClickable : 'div';
+    let Wrapper: any = 'div';
     const wrapperProps = { ...forwardedProps };
-    if (isClickable) {
-        Object.assign(wrapperProps, linkProps, { as: linkAs || linkProps?.href ? 'a' : 'button' }, disabledStateProps);
+    if (!isAnyDisabled && isLink) {
+        Wrapper = linkAs || 'a';
+        Object.assign(wrapperProps, linkProps);
+    } else if (!isAnyDisabled && isButton) {
+        Wrapper = 'button';
+        wrapperProps.type = forwardedProps.type || 'button';
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 

package/src/utils/react/renderButtonOrLink.tsx

@@ -0,0 +1,16 @@
+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);
+};

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

package/src/utils/type/index.ts

@@ -6,4 +6,3 @@ 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): React.JSX.Element;
+declare function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps): JSX.Element;
 /**
  * Get DisabledState context value
  */

package/utils/index.js

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

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

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}
-                {...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>;