@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.12

package/src/components/navigation/NavigationItem.tsx

@@ -1,82 +0,0 @@
-import { 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,137 +0,0 @@
-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 { 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,94 +0,0 @@
-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',
-    });
-});

package/src/components/notification/Notification.tsx

@@ -1,138 +0,0 @@
-import { useRef } from 'react';
-
-import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-
-import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
-import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
-import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { Portal } from '@lumx/react/utils';
-
-/**
- * Defines the props of the component.
- */
-export interface NotificationProps extends GenericProps, HasTheme {
-    /** Action button label. */
-    actionLabel?: string;
-    /** Content. */
-    content?: React.ReactNode;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Notification type. */
-    type?: Kind;
-    /** Z-axis position. */
-    zIndex?: number;
-    /** On action button click callback. */
-    onActionClick?(): void;
-    /** On click callback. */
-    onClick?(): void;
-    /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
-    usePortal?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Notification';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<NotificationProps> = {
-    zIndex: 9999,
-    usePortal: true,
-};
-
-/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-/**
- * Notification component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        actionLabel,
-        className,
-        content,
-        isOpen,
-        onActionClick,
-        onClick,
-        theme = defaultTheme,
-        type,
-        zIndex = DEFAULT_PROPS.zIndex,
-        usePortal = DEFAULT_PROPS.usePortal,
-        style,
-        ...forwardedProps
-    } = props;
-    if (!DOCUMENT) {
-        // Can't render in SSR.
-        return null;
-    }
-    const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};
-    const rootRef = useRef<HTMLDivElement>(null);
-    const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
-    const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
-
-    const handleCallback = (evt: React.MouseEvent) => {
-        if (isFunction(onActionClick)) {
-            onActionClick();
-        }
-        evt.stopPropagation();
-    };
-
-    if (!type || !isVisible) {
-        return null;
-    }
-
-    return (
-        <Portal enabled={usePortal}>
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-            <div
-                ref={mergeRefs(ref, rootRef)}
-                role="alert"
-                {...forwardedProps}
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        color,
-                        hasAction,
-                        isHidden: !isOpen,
-                        prefix: CLASSNAME,
-                    }),
-                )}
-                onClick={onClick}
-                style={{ ...style, zIndex }}
-            >
-                <div className={`${CLASSNAME}__icon`}>
-                    <Icon icon={icon} size={Size.s} />
-                </div>
-                <div className={`${CLASSNAME}__content`}>{content}</div>
-                {hasAction && (
-                    <div className={`${CLASSNAME}__action`}>
-                        <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>
-                            <span>{actionLabel}</span>
-                        </Button>
-                    </div>
-                )}
-            </div>
-        </Portal>
-    );
-});
-Notification.displayName = COMPONENT_NAME;
-Notification.className = CLASSNAME;
-Notification.defaultProps = DEFAULT_PROPS;

package/src/components/notification/Notifications.stories.tsx

@@ -1,92 +0,0 @@
-import { Notification, Kind } from '@lumx/react';
-import { NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
-
-export default {
-    title: 'LumX components/notification/Notification',
-    component: Notification,
-    args: Notification.defaultProps,
-    argTypes: {
-        type: getSelectArgType(Kind),
-        onClick: { action: true },
-    },
-    parameters: {
-        // Delay Chromatic snapshot to wait for notification to open.
-        chromatic: {
-            pauseAnimationAtEnd: true,
-            delay: NOTIFICATION_TRANSITION_DURATION,
-        },
-    },
-    // Force minimum chromatic screen size to make sure the dialog appears in view.
-    decorators: [withChromaticForceScreenSize()],
-};
-
-/**
- * Error notification
- */
-export const Error = {
-    args: {
-        type: Kind.error,
-        content: 'Error',
-        isOpen: true,
-    },
-};
-
-/**
- * Info notification
- */
-export const Info = {
-    args: {
-        type: Kind.info,
-        content: 'Info',
-        isOpen: true,
-    },
-};
-
-/**
- * Success notification
- */
-export const Success = {
-    args: {
-        type: Kind.success,
-        content: 'Success',
-        isOpen: true,
-    },
-};
-
-/**
- * Warning notification
- */
-export const Warning = {
-    args: {
-        type: Kind.warning,
-        content: 'Warning',
-        isOpen: true,
-    },
-};
-
-/**
- * Info notification with action button
- */
-export const InfoWithAction = {
-    argTypes: {
-        onActionClick: { action: true },
-    },
-    args: {
-        type: Kind.info,
-        content: 'InfoWithAction',
-        actionLabel: 'Undo',
-        isOpen: true,
-    },
-};
-
-/**
- * Info notification rendered outside a React portal
- */
-export const InfoWithoutPortal = {
-    args: {
-        ...Info.args,
-        usePortal: false,
-    },
-};

package/src/components/notification/constants.ts

@@ -1,28 +0,0 @@
-import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-
-/**
- * Notification delay before hiding.
- */
-export const HIDE_DELAY = 6000;
-
-/**
- * Notification icon and colors according to their type.
- */
-export const NOTIFICATION_CONFIGURATION = {
-    error: {
-        color: 'red',
-        icon: mdiAlert,
-    },
-    info: {
-        color: 'blue',
-        icon: mdiInformation,
-    },
-    success: {
-        color: 'green',
-        icon: mdiCheckCircle,
-    },
-    warning: {
-        color: 'yellow',
-        icon: mdiAlertCircle,
-    },
-};