@lumx/react 3.20.1-alpha.25 → 3.20.1-alpha.27

package/src/components/table/TableCell.test.tsx

@@ -1,72 +0,0 @@
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { TableCell, TableCellProps, ThOrder } from './TableCell';
-
-const CLASSNAME = TableCell.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableCellProps> = {}) => {
-    const Parent = props?.variant === 'head' ? 'thead' : 'tbody';
-    render(
-        <table>
-            <Parent>
-                <tr>
-                    <TableCell {...(props as any)} />
-                </tr>
-            </Parent>
-        </table>,
-    );
-    const tableCell = getByClassName(document.body, CLASSNAME);
-    return { props, tableCell };
-};
-
-describe(`<${TableCell.displayName}>`, () => {
-    it('should render default', () => {
-        const content = 'Content';
-        const { tableCell } = setup({ children: content });
-        expect(tableCell).toBe(screen.queryByRole('cell', { name: content }));
-    });
-
-    it('should render header variant', () => {
-        const content = 'Content';
-        const { tableCell } = setup({ children: content, variant: 'head' });
-        expect(tableCell).toBe(screen.queryByRole('columnheader', { name: content }));
-    });
-
-    it('should render header variant clickable', async () => {
-        const content = 'Content';
-        const onHeaderClick = vi.fn();
-        const { tableCell } = setup({ children: content, variant: 'head', onHeaderClick });
-
-        const headerButton = within(tableCell).getByRole('button', { name: content });
-        await userEvent.click(headerButton);
-        expect(onHeaderClick).toHaveBeenCalled();
-    });
-
-    it('should render header sortable', () => {
-        const { tableCell } = setup({ variant: 'head', isSortable: true });
-        expect(tableCell).toHaveAttribute('aria-sort', 'none');
-    });
-
-    it('should render header sortable ascending', () => {
-        const { tableCell } = setup({ variant: 'head', sortOrder: ThOrder.asc, isSortable: true });
-        expect(tableCell).toHaveAttribute('aria-sort', 'ascending');
-    });
-
-    it('should render header sortable descending', () => {
-        const { tableCell } = setup({ variant: 'head', sortOrder: ThOrder.desc, isSortable: true });
-        expect(tableCell).toHaveAttribute('aria-sort', 'descending');
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tableCell',
-        forwardAttributes: 'tableCell',
-    });
-});

package/src/components/table/TableCell.tsx

@@ -1,130 +0,0 @@
-import classNames from 'classnames';
-
-import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
-import { Icon, Size } from '@lumx/react';
-import { GenericProps, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Table head cell sort order.
- */
-export const ThOrder = { asc: 'asc', desc: 'desc' } as const;
-export type ThOrder = ValueOf<typeof ThOrder>;
-
-/**
- * Table cell variants.
- */
-export const TableCellVariant = { body: 'body', head: 'head' } as const;
-export type TableCellVariant = ValueOf<typeof TableCellVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface TableCellProps extends GenericProps {
-    /** Icon (SVG path).(thead only). */
-    icon?: string;
-    /** Whether the column is sortable or not (thead only). */
-    isSortable?: boolean;
-    /** Sort order displayed as icon (sortable thead only). */
-    sortOrder?: ThOrder;
-    /** Variant. */
-    variant?: TableCellVariant;
-    /** On header cell click callback. */
-    onHeaderClick?(): void;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableCell';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableCellProps> = {
-    variant: TableCellVariant.body,
-};
-
-/**
- * TableCell component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props, ref) => {
-    const {
-        children,
-        className,
-        icon,
-        isSortable,
-        onHeaderClick,
-        sortOrder,
-        variant = DEFAULT_PROPS.variant,
-        ...forwardedProps
-    } = props;
-
-    // Use button if clickable
-    const Wrapper = onHeaderClick ? 'button' : 'div';
-    const wrapperProps = Wrapper === 'button' ? ({ type: 'button', onClick: onHeaderClick } as const) : undefined;
-
-    // ARIA sort
-    let ariaSort: 'ascending' | 'descending' | 'none' | undefined;
-    if (isSortable) {
-        ariaSort = 'none';
-        if (sortOrder === ThOrder.asc) ariaSort = 'ascending';
-        if (sortOrder === ThOrder.desc) ariaSort = 'descending';
-    }
-
-    return (
-        <>
-            {variant === TableCellVariant.head && (
-                <th
-                    ref={ref}
-                    {...forwardedProps}
-                    className={classNames(
-                        handleBasicClasses({
-                            prefix: CLASSNAME,
-                            isSortable,
-                            isSorted: isSortable && !!sortOrder,
-                        }),
-                        className,
-                        `${CLASSNAME}--head`,
-                    )}
-                    aria-sort={ariaSort}
-                >
-                    <Wrapper className={`${CLASSNAME}-wrapper`} {...wrapperProps}>
-                        {icon && !isSortable && <Icon className={`${CLASSNAME}-icon`} icon={icon} size={Size.xxs} />}
-
-                        {isSortable && sortOrder === ThOrder.asc && (
-                            <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowUp} size={Size.xxs} />
-                        )}
-
-                        {isSortable && sortOrder === ThOrder.desc && (
-                            <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowDown} size={Size.xxs} />
-                        )}
-
-                        <div className={`${CLASSNAME}-content`}>{children}</div>
-                    </Wrapper>
-                </th>
-            )}
-
-            {variant === TableCellVariant.body && (
-                <td {...forwardedProps} className={classNames(className, CLASSNAME, `${CLASSNAME}--body`)}>
-                    <div className={`${CLASSNAME}-content`}>{children}</div>
-                </td>
-            )}
-        </>
-    );
-});
-TableCell.displayName = COMPONENT_NAME;
-TableCell.className = CLASSNAME;
-TableCell.defaultProps = DEFAULT_PROPS;

package/src/components/table/TableHeader.test.tsx

@@ -1,30 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-
-import { TableHeader, TableHeaderProps } from './TableHeader';
-
-const CLASSNAME = TableHeader.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: TableHeaderProps = {}) => {
-    render(
-        <table>
-            <TableHeader {...props} />
-        </table>,
-    );
-    const tableHeader = queryByClassName(document.body, CLASSNAME);
-    return { props, tableHeader };
-};
-
-describe(`<${TableHeader.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tableHeader',
-        forwardAttributes: 'tableHeader',
-        forwardRef: 'tableHeader',
-    });
-});

package/src/components/table/TableHeader.tsx

@@ -1,48 +0,0 @@
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface TableHeaderProps extends GenericProps {
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableHeader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableHeaderProps> = {};
-
-/**
- * TableHeader component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <thead ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </thead>
-    );
-});
-TableHeader.displayName = COMPONENT_NAME;
-TableHeader.className = CLASSNAME;
-TableHeader.defaultProps = DEFAULT_PROPS;

package/src/components/table/TableRow.test.tsx

@@ -1,40 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { render, screen } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { TableRow, TableRowProps } from './TableRow';
-
-const CLASSNAME = TableRow.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableRowProps> = {}) => {
-    render(
-        <table>
-            <tbody>
-                <TableRow {...(props as any)} />
-            </tbody>
-        </table>,
-    );
-    const tableRow = getByClassName(document.body, CLASSNAME);
-    return { props, tableRow };
-};
-
-describe(`<${TableRow.displayName}>`, () => {
-    it('should render default', () => {
-        const content = 'Content';
-        const { tableRow } = setup({ children: <td>{content}</td> });
-        expect(tableRow).toBe(screen.queryByRole('row', { name: content }));
-        expect(tableRow).toHaveAttribute('tabindex', '-1');
-        expect(tableRow).not.toHaveAttribute('aria-disabled');
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tableRow',
-        forwardAttributes: 'tableRow',
-        forwardRef: 'tableRow',
-    });
-});

package/src/components/table/TableRow.tsx

@@ -1,71 +0,0 @@
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-
-/**
- * Defines the props of the component.
- */
-export interface TableRowProps extends GenericProps {
-    /** Whether the component is clickable or not. */
-    isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableRow';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableRowProps> = {};
-
-/**
- * TableRow component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableRow = forwardRef<TableRowProps, HTMLTableRowElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const { children, className, isClickable, isSelected, ...forwardedProps } = otherProps;
-
-    return (
-        <tr
-            ref={ref}
-            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : -1}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    isClickable: isClickable && !isAnyDisabled,
-                    isDisabled: isAnyDisabled,
-                    isSelected: isSelected && !isAnyDisabled,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            aria-disabled={isAnyDisabled}
-        >
-            {children}
-        </tr>
-    );
-});
-
-TableRow.displayName = COMPONENT_NAME;
-TableRow.className = CLASSNAME;
-TableRow.defaultProps = DEFAULT_PROPS;

package/src/components/table/index.ts

@@ -1,5 +0,0 @@
-export * from './Table';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableHeader';
-export * from './TableRow';

package/src/components/tabs/Tab.test.tsx

@@ -1,50 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-
-import { Icon } from '@lumx/react';
-import { mdiPlay } from '@lumx/icons';
-import { Tab, TabProps } from './Tab';
-
-const CLASSNAME = Tab.className as string;
-
-type SetupProps = Partial<TabProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props = { label: 'Label', ...propsOverride };
-    render(<Tab {...props} />);
-    const tab = getByClassName(document.body, CLASSNAME);
-    const icon = queryByClassName(tab, Icon.className as string);
-    return { props, tab, icon };
-};
-
-describe(`<${Tab.displayName}>`, () => {
-    it('should render default', () => {
-        const label = 'Label';
-        const { tab, icon } = setup({ label });
-        expect(tab).toBe(screen.queryByRole('tab', { name: label }));
-        expect(tab.tagName).toBe('BUTTON');
-        expect(tab).toHaveAttribute('type', 'button');
-        expect(icon).not.toBeInTheDocument();
-    });
-
-    it('should render icon', () => {
-        const { icon } = setup({ icon: mdiPlay });
-        expect(icon).toBeInTheDocument();
-    });
-
-    it('should render icon with props', () => {
-        const { icon } = setup({ icon: mdiPlay, iconProps: { color: 'green', colorVariant: 'L2', hasShape: true } });
-        expect(icon).toHaveClass('lumx-icon--color-green', 'lumx-icon--color-variant-L2');
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tab',
-        forwardAttributes: 'tab',
-        forwardRef: 'tab',
-    });
-});

package/src/components/tabs/Tab.tsx

@@ -1,133 +0,0 @@
-import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { Icon, IconProps, Size, Text } from '@lumx/react';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { useTabProviderContext } from './state';
-
-/**
- * Defines the props of the component.
- */
-export interface TabProps extends GenericProps {
-    /** Children are not supported. */
-    children?: never;
-    /** Icon (SVG path). */
-    icon?: IconProps['icon'];
-    /** Icon component properties. */
-    iconProps?: Omit<IconProps, 'icon'>;
-    /** Native id property. */
-    id?: string;
-    /** Whether the tab is active or not. */
-    isActive?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Label content. */
-    label: string | ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Tab';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-tabs__link`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TabProps> = {};
-
-/**
- * Tab component.
- *
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
-    const {
-        className,
-        icon,
-        iconProps = {},
-        id,
-        isActive: propIsActive,
-        label,
-        onFocus,
-        onKeyPress,
-        tabIndex = -1,
-        ...forwardedProps
-    } = otherProps;
-    const state = useTabProviderContext('tab', id);
-    const isActive = propIsActive || state?.isActive;
-
-    const changeToCurrentTab = useCallback(() => {
-        if (isAnyDisabled) {
-            return;
-        }
-        state?.changeToTab();
-    }, [isAnyDisabled, state]);
-
-    const handleFocus: FocusEventHandler = useCallback(
-        (event) => {
-            onFocus?.(event);
-            if (state?.shouldActivateOnFocus) {
-                changeToCurrentTab();
-            }
-        },
-        [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],
-    );
-
-    const handleKeyPress: KeyboardEventHandler = useCallback(
-        (event) => {
-            onKeyPress?.(event);
-            if (event.key !== 'Enter' || isAnyDisabled) {
-                return;
-            }
-            changeToCurrentTab();
-        },
-        [changeToCurrentTab, isAnyDisabled, onKeyPress],
-    );
-
-    return (
-        <button
-            ref={ref}
-            {...forwardedProps}
-            type="button"
-            id={state?.tabId}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),
-            )}
-            onClick={changeToCurrentTab}
-            onKeyPress={handleKeyPress}
-            onFocus={handleFocus}
-            role="tab"
-            tabIndex={isActive ? 0 : tabIndex}
-            aria-disabled={isAnyDisabled}
-            aria-selected={isActive}
-            aria-controls={state?.tabPanelId}
-        >
-            {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
-            {label && (
-                <Text as="span" truncate>
-                    {label}
-                </Text>
-            )}
-        </button>
-    );
-});
-Tab.displayName = COMPONENT_NAME;
-Tab.className = CLASSNAME;
-Tab.defaultProps = DEFAULT_PROPS;

package/src/components/tabs/TabList.test.tsx

@@ -1,49 +0,0 @@
-import { Tab } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-
-import { TabList, TabListProps } from './TabList';
-
-const CLASSNAME = TabList.className as string;
-
-type SetupProps = Partial<TabListProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const tabs = [<Tab key={0} label="Tab 0" />, <Tab key={1} label="Tab 1" />];
-    const props: TabListProps = {
-        children: tabs,
-        'aria-label': 'Tab list',
-        ...propsOverride,
-    };
-
-    render(<TabList {...props} />, { wrapper });
-    const tabList = getByClassName(document.body, CLASSNAME);
-    const links = queryByClassName(tabList, `${CLASSNAME}__links`);
-    return { props, tabList, links };
-};
-
-describe(`<${TabList.displayName}>`, () => {
-    it('should render default', () => {
-        const name = 'Tab list';
-        const { links } = setup({ 'aria-label': name });
-        expect(links).toBe(screen.queryByRole('tablist', { name }));
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tabList',
-        forwardAttributes: 'tabList',
-        forwardRef: 'tabList',
-        applyTheme: {
-            affects: [{ element: 'tabList' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});