@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,71 @@
+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

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

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,133 @@
+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

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