@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/navigation/Navigation.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { Orientation, Theme } from '@lumx/react';
-import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { NavigationSection } from './NavigationSection';
-import { NavigationItem } from './NavigationItem';
-import { NavigationContext } from './context';
-
-export type NavigationProps = React.ComponentProps<'nav'> &
-    HasClassName &
-    HasTheme & {
-        /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-        children?: React.ReactNode;
-        orientation?: Orientation;
-    } & HasAriaLabelOrLabelledBy;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Navigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props
- */
-const DEFAULT_PROPS = {
-    orientation: Orientation.vertical,
-};
-
-type SubComponents = {
-    Section: typeof NavigationSection;
-    Item: typeof NavigationItem;
-};
-
-export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        children,
-        className,
-        theme = defaultTheme,
-        orientation = DEFAULT_PROPS.orientation,
-        ...forwardedProps
-    } = props;
-    return (
-        <ThemeProvider value={theme}>
-            <nav
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                        theme,
-                        orientation,
-                    }),
-                )}
-                ref={ref}
-                {...forwardedProps}
-            >
-                <NavigationContext.Provider value={{ orientation }}>
-                    <ul className={`${CLASSNAME}__list`}>{children}</ul>
-                </NavigationContext.Provider>
-            </nav>
-        </ThemeProvider>
-    );
-});
-Navigation.displayName = COMPONENT_NAME;
-Navigation.className = CLASSNAME;
-Navigation.defaultProps = DEFAULT_PROPS;
-
-// Sub components
-Navigation.Section = NavigationSection;
-Navigation.Item = NavigationItem;

package/src/components/navigation/NavigationItem.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { NavigationItem, NavigationItemProps } from './NavigationItem';
-
-const CLASSNAME = NavigationItem.className as string;
-
-type SetupProps = Partial<NavigationItemProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-
-const setup = (propsOverride: SetupProps = {}) => {
-    const props = { ...propsOverride };
-    const { container } = render(<NavigationItem label="A link" href="" {...props} />);
-
-    return {
-        container,
-        element: getByClassName(container, CLASSNAME),
-        link: getByClassName(container, `${CLASSNAME}__link`),
-        props,
-    };
-};
-
-describe(`<${NavigationItem.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'link' });
-});

package/src/components/navigation/NavigationItem.tsx

@@ -1,82 +0,0 @@
-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 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). */
-    icon?: string;
-    /** Label content. */
-    label: ReactNode;
-    /** Mark as the current page link */
-    isCurrentPage?: boolean;
-};
-
-/**
- * Navigation item props
- */
-export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &
-    HasTheme &
-    HasClassName &
-    BaseNavigationItemProps &
-    HasRequiredLinkHref<E>;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'NavigationItem';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-export const NavigationItem = Object.assign(
-    forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
-        const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
-        const theme = useTheme();
-        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
-
-        return (
-            <li
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                        theme,
-                    }),
-                )}
-            >
-                <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <RawClickable
-                        as={Element}
-                        className={handleBasicClasses({
-                            prefix: `${CLASSNAME}__link`,
-                            isSelected: isCurrentPage,
-                        })}
-                        ref={ref as React.Ref<any>}
-                        aria-current={isCurrentPage ? 'page' : undefined}
-                        {...forwardedProps}
-                    >
-                        {icon ? (
-                            <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />
-                        ) : null}
-
-                        <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
-                            {label}
-                        </Text>
-                    </RawClickable>
-                </Tooltip>
-            </li>
-        );
-    }),
-    {
-        displayName: COMPONENT_NAME,
-        className: CLASSNAME,
-    },
-);

package/src/components/navigation/NavigationSection.test.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, RenderWrapper } from '@lumx/react/testing/utils';
-import { render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { Orientation } from '@lumx/core/js/constants';
-
-import { NavigationItem } from './NavigationItem';
-import { NavigationSection, NavigationSectionProps } from './NavigationSection';
-import { NavigationContext } from './context';
-
-const CLASSNAME = NavigationSection.className as string;
-
-type SetupProps = Partial<NavigationSectionProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-
-const setup = (
-    propsOverride: SetupProps = {},
-    { orientation = Orientation.vertical, wrapper }: { orientation?: Orientation; wrapper?: RenderWrapper } = {},
-) => {
-    const props = { label: 'Section 1', ...propsOverride };
-    const { container } = render(
-        <NavigationContext.Provider value={{ orientation }}>
-            <NavigationSection {...props}>
-                <NavigationItem label="A content" href="" />
-                <NavigationItem label="A link" href="" />
-                <NavigationItem label="A community" href="" />
-            </NavigationSection>
-        </NavigationContext.Provider>,
-        { wrapper },
-    );
-
-    const query = {
-        button: () => screen.getByRole('button', { name: props.label as string }),
-        content: () => queryByClassName(container, `${CLASSNAME}__drawer`),
-        popover: () => queryByClassName(container, `${CLASSNAME}__drawer--popover`),
-    };
-    return {
-        container,
-        element: getByClassName(container, CLASSNAME),
-        button: query.button(),
-        query,
-        props,
-    };
-};
-
-describe(`<${NavigationSection.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-    });
-
-    it('should be closed by default in vertical mode', () => {
-        const { element, query } = setup();
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        // Section is visible
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
-        // Content is not visible
-        expect(query.content()).not.toBeInTheDocument();
-    });
-
-    it('should be closed by default in horizontal mode', () => {
-        const { element, query } = setup({}, { orientation: Orientation.horizontal });
-        expect(element).toBeInTheDocument();
-        expect(element).toHaveClass(CLASSNAME);
-        // Section is visible
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
-        // Content is not visible
-        expect(query.popover()).not.toBeInTheDocument();
-    });
-
-    it('should toggle on click in vertical mode', async () => {
-        const { query } = setup();
-        // Content is not visible
-        expect(query.content()).not.toBeInTheDocument();
-        // click to open
-        await userEvent.click(query.button() as any);
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
-        expect(query.button()).toHaveAttribute('aria-controls');
-        expect(query.content()).toBeInTheDocument();
-        expect(query.button().getAttribute('aria-controls')).toBe(query.content()?.getAttribute('id'));
-        // click to close
-        await userEvent.click(query.button() as any);
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
-        expect(query.content()).not.toBeInTheDocument();
-    });
-
-    it('should be in a popover and toggle on click in horizontal mode', async () => {
-        const { query } = setup({}, { orientation: Orientation.horizontal });
-        // Content is not visible
-        expect(query.popover()).not.toBeInTheDocument();
-        // click to open
-        await userEvent.click(query.button() as any);
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
-        expect(query.button()).toHaveAttribute('aria-controls');
-        expect(query.popover()).toBeInTheDocument();
-        expect(query.button().getAttribute('aria-controls')).toBe(query.popover()?.getAttribute('id'));
-        // click to close
-        await userEvent.click(query.button() as any);
-        expect(query.button()).toBeInTheDocument();
-        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
-        expect(query.popover()).not.toBeInTheDocument();
-    });
-
-    it('should also toggle on click away in horizontal mode', async () => {
-        const { query } = setup({}, { orientation: Orientation.horizontal });
-        // Content is not visible
-        expect(query.popover()).not.toBeInTheDocument();
-        // click to open
-        await userEvent.click(query.button() as any);
-        expect(query.popover()).toBeInTheDocument();
-        // click away to close
-        await userEvent.click(document.body);
-        expect(query.popover()).not.toBeInTheDocument();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'button',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: false,
-            viaContext: true,
-        },
-    });
-});

package/src/components/navigation/NavigationSection.tsx

@@ -1,108 +0,0 @@
-import React, { useRef, useState, useContext } from 'react';
-
-import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
-import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { HasClassName } from '@lumx/react/utils/type';
-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';
-
-export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
-    /** Items inside the section */
-    children: React.ReactNode;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Label content. */
-    label: string | React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'NavigationSection';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {
-    const { children, className, label, icon, ...forwardedProps } = props;
-    const [isOpen, setIsOpen] = useState(false);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const sectionId = useId();
-    const { orientation } = useContext(NavigationContext) || {};
-    const theme = useTheme();
-    const isDropdown = orientation === Orientation.horizontal;
-    return (
-        <li
-            className={classNames(
-                className,
-                CLASSNAME,
-                ITEM_CLASSNAME,
-                handleBasicClasses({
-                    prefix: ITEM_CLASSNAME,
-                    theme,
-                }),
-            )}
-            ref={ref}
-        >
-            <RawClickable<'button'>
-                as="button"
-                {...forwardedProps}
-                aria-controls={sectionId}
-                aria-expanded={isOpen}
-                className={classNames(`${ITEM_CLASSNAME}__link`)}
-                ref={buttonRef}
-                onClick={(event) => {
-                    setIsOpen(!isOpen);
-                    event.stopPropagation();
-                }}
-            >
-                {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
-
-                <Text as="span" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>
-                    {label}
-                </Text>
-                <Icon
-                    className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
-                    icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                />
-            </RawClickable>
-            {isOpen &&
-                (isDropdown ? (
-                    <Popover
-                        anchorRef={buttonRef}
-                        isOpen={isOpen}
-                        placement={Placement.BOTTOM_START}
-                        usePortal={false}
-                        closeOnClickAway
-                        closeOnEscape
-                        onClick={() => setIsOpen(false)}
-                        onClose={() => setIsOpen(false)}
-                        zIndex={996}
-                    >
-                        <ThemeProvider value={Theme.light}>
-                            <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>
-                                <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>
-                                    {children}
-                                </NavigationContext.Provider>
-                            </ul>
-                        </ThemeProvider>
-                    </Popover>
-                ) : (
-                    <ul className={`${CLASSNAME}__drawer`} id={sectionId}>
-                        {children}
-                    </ul>
-                ))}
-        </li>
-    );
-});
-NavigationSection.displayName = COMPONENT_NAME;
-NavigationSection.className = CLASSNAME;

package/src/components/navigation/context.tsx

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-import { Orientation } from '@lumx/core/js/constants';
-
-export const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({
-    orientation: Orientation.vertical,
-});

package/src/components/navigation/index.ts

@@ -1 +0,0 @@
-export * from './Navigation';

package/src/components/notification/Notification.test.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-
-import { Kind } from '@lumx/react';
-import { render, within, screen } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import userEvent from '@testing-library/user-event';
-
-import { Notification, NotificationProps } from './Notification';
-
-const CLASSNAME = Notification.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<NotificationProps> = {}) => {
-    render(<Notification isOpen type={Kind.info} {...props} />);
-    const notification = queryByClassName(document.body, CLASSNAME);
-
-    const icon = notification && queryByClassName(notification, `${CLASSNAME}__icon`);
-    const action = notification && queryByClassName(notification, `${CLASSNAME}__action`);
-    const actionButton = action && within(action).queryByRole('button');
-
-    return { action, actionButton, icon, notification, props };
-};
-
-describe(`<${Notification.displayName}>`, () => {
-    it('should not render without type', () => {
-        const { notification } = setup({ type: undefined });
-        expect(notification).not.toBeInTheDocument();
-    });
-
-    it('should not render when closed', () => {
-        const { notification } = setup({ isOpen: false });
-        expect(notification).not.toBeInTheDocument();
-    });
-
-    it('should render content', () => {
-        const content = 'Content';
-        const { notification, icon } = setup({ content });
-        expect(notification).toBeInTheDocument();
-        expect(notification).toHaveTextContent(content);
-        expect(icon).toBeInTheDocument();
-    });
-
-    it('should render content & action', async () => {
-        const onClick = vi.fn();
-        const onActionClick = vi.fn();
-        const content = 'Content';
-        const actionLabel = 'actionLabel';
-        const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
-
-        expect(notification).toBeInTheDocument();
-        expect(notification).toHaveTextContent(content);
-
-        expect(action).toBeInTheDocument();
-        expect(actionButton).toBeInTheDocument();
-        expect(actionButton).toHaveTextContent(actionLabel);
-
-        // Click action button
-        await userEvent.click(actionButton as any);
-        expect(onActionClick).toHaveBeenCalled();
-        expect(onClick).not.toHaveBeenCalled();
-
-        // Click notification
-        await userEvent.click(notification as any);
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    it('should render outside a portal', () => {
-        const parentId = '123';
-        render(
-            <div data-testid={parentId}>
-                <Notification isOpen type="info" usePortal={false} />
-            </div>,
-        );
-        const parent = screen.getByTestId(parentId);
-        const notification = queryByClassName(parent, CLASSNAME);
-        expect(notification).toBeInTheDocument();
-    });
-
-    it('should forward styles', () => {
-        const { notification } = setup({ style: { color: 'red' } });
-
-        expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'notification',
-        forwardAttributes: 'notification',
-        forwardRef: 'notification',
-    });
-});