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

package/src/components/switch/Switch.test.tsx

@@ -1,144 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-
-import { Switch, SwitchProps } from './Switch';
-
-const CLASSNAME = Switch.className as string;
-
-type SetupProps = Partial<SwitchProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props = { ...propsOverride };
-    render(<Switch {...props} />, { wrapper });
-    const switchWrapper = getByClassName(document.body, CLASSNAME);
-    const input = getByTagName(switchWrapper, 'input');
-    const helper = queryByClassName(switchWrapper, `${CLASSNAME}__helper`);
-    const label = queryByClassName(switchWrapper, `${CLASSNAME}__label`);
-    return { switchWrapper, input, helper, label, props };
-};
-
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-describe(`<${Switch.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render correctly', () => {
-            const { switchWrapper, input, label, helper } = setup();
-            expect(switchWrapper).toBeInTheDocument();
-            expect(switchWrapper).toHaveClass(CLASSNAME);
-            expect(switchWrapper).not.toHaveClass('lumx-switch--is-disabled');
-            expect(switchWrapper).toHaveClass('lumx-switch--is-unchecked');
-
-            expect(label).not.toBeInTheDocument();
-            expect(helper).not.toBeInTheDocument();
-
-            expect(input).toBeInTheDocument();
-            expect(input).toHaveAttribute('role', 'switch');
-            expect(input).not.toBeChecked();
-            expect(input).not.toBeDisabled();
-        });
-
-        it('should render disabled and checked', () => {
-            const { switchWrapper, input } = setup({
-                isDisabled: true,
-                isChecked: true,
-            });
-            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
-            expect(switchWrapper).toHaveClass('lumx-switch--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toBeDisabled();
-        });
-
-        it('should render helper and label', () => {
-            const id = 'switchWrapper1';
-            const { props, helper, label, input } = setup({
-                id,
-                helper: 'Test helper',
-                children: 'Test label',
-            });
-
-            expect(helper).toBeInTheDocument();
-            expect(helper).toHaveTextContent(props.helper as string);
-            expect(helper).toHaveAttribute('id');
-
-            expect(label).toBeInTheDocument();
-            expect(label).toHaveTextContent(props.children as string);
-            expect(label).toHaveAttribute('for', id);
-
-            expect(input).toHaveAttribute('id', id);
-            expect(input).toHaveAttribute('aria-describedby', helper?.id);
-        });
-
-        it('should forward input props', () => {
-            const { props, input } = setup({
-                inputProps: { 'aria-labelledby': 'labelledby-id' },
-            });
-
-            expect(input).toHaveAttribute('aria-labelledby', props.inputProps?.['aria-labelledby']);
-        });
-    });
-
-    describe('Events', () => {
-        const onChange = vi.fn();
-
-        it('should trigger `onChange` when switchWrapper is clicked', async () => {
-            const value = 'value';
-            const name = 'name';
-            const { input } = setup({ checked: false, onChange, value, name });
-            expect(input).not.toBeChecked();
-
-            await userEvent.click(input);
-
-            expect(onChange).toHaveBeenCalledWith(true, value, name, expect.any(Object));
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should be disabled with isDisabled', async () => {
-            const onChange = vi.fn();
-            const { switchWrapper, input } = setup({ isDisabled: true, onChange });
-
-            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
-            expect(input).toBeDisabled();
-            expect(input).toHaveAttribute('readOnly');
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('should be disabled with aria-disabled', async () => {
-            const onChange = vi.fn();
-            const { switchWrapper, input } = setup({ 'aria-disabled': true, onChange });
-
-            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
-            // Note: input is not disabled (so it can be focused) but it's readOnly.
-            expect(input).not.toBeDisabled();
-            expect(input).toHaveAttribute('aria-disabled', 'true');
-            expect(input).toHaveAttribute('readOnly');
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'switchWrapper',
-        forwardAttributes: 'switchWrapper',
-        forwardRef: 'switchWrapper',
-        applyTheme: {
-            affects: [{ element: 'switchWrapper' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/switch/Switch.tsx

@@ -1,145 +0,0 @@
-import { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
-
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-
-import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-/**
- * Defines the props of the component.
- */
-export interface SwitchProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** Helper text. */
-    helper?: string;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Native input name property. */
-    name?: string;
-    /** Position of the switch relative to the label. */
-    position?: Extract<Alignment, 'right' | 'left'>;
-    /** Native input value property. */
-    value?: string;
-    /** On change callback. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
-    /** optional props for input */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Switch';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<SwitchProps> = {
-    position: Alignment.left,
-};
-
-/**
- * Switch component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        checked,
-        children,
-        className,
-        helper,
-        id,
-        isChecked = checked,
-        name,
-        onChange,
-        position = DEFAULT_PROPS.position,
-        theme = defaultTheme,
-        value,
-        inputProps = {},
-        ...forwardedProps
-    } = otherProps;
-    const generatedInputId = useId();
-    const inputId = id || generatedInputId;
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange) {
-            onChange(!isChecked, value, name, event);
-        }
-    };
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    isChecked,
-                    isDisabled: isAnyDisabled,
-                    position,
-                    theme,
-                    isUnchecked: !isChecked,
-                }),
-            )}
-        >
-            <div className={`${CLASSNAME}__input-wrapper`}>
-                <input
-                    type="checkbox"
-                    role="switch"
-                    id={inputId}
-                    className={`${CLASSNAME}__input-native`}
-                    name={name}
-                    value={value}
-                    {...disabledStateProps}
-                    readOnly={inputProps.readOnly || isAnyDisabled}
-                    checked={isChecked}
-                    aria-checked={Boolean(isChecked)}
-                    onChange={handleChange}
-                    aria-describedby={helper ? `${inputId}-helper` : undefined}
-                    {...inputProps}
-                />
-
-                <div className={`${CLASSNAME}__input-placeholder`}>
-                    <div className={`${CLASSNAME}__input-background`} />
-                    <div className={`${CLASSNAME}__input-indicator`} />
-                </div>
-            </div>
-
-            {Children.count(children) > 0 && (
-                <div className={`${CLASSNAME}__content`}>
-                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
-                        {children}
-                    </InputLabel>
-                    {!isEmpty(helper) && (
-                        <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
-                            {helper}
-                        </InputHelper>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-});
-Switch.displayName = COMPONENT_NAME;
-Switch.className = CLASSNAME;
-Switch.defaultProps = DEFAULT_PROPS;

package/src/components/switch/index.ts

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

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

@@ -1,29 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-
-import { Table, TableProps } from './Table';
-
-const CLASSNAME = Table.className as string;
-
-const setup = (props: Partial<TableProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Table {...(props as any)} />, { wrapper });
-    const table = queryByClassName(document.body, CLASSNAME);
-    return { props, table };
-};
-
-describe(`<${Table.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'table',
-        forwardAttributes: 'table',
-        forwardRef: 'table',
-        applyTheme: {
-            affects: [{ element: 'table' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/table/Table.tsx

@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface TableProps extends GenericProps, HasTheme {
-    /** Whether the table has checkbox or thumbnail on first cell or not. */
-    hasBefore?: boolean;
-    /** Whether the table has dividers or not. */
-    hasDividers?: boolean;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Table';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TableProps> = {};
-
-/**
- * Table component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Table = forwardRef<TableProps, HTMLTableElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { children, className, hasBefore, hasDividers, theme = defaultTheme, ...forwardedProps } = props;
-
-    return (
-        <table
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, hasBefore, hasDividers, theme }))}
-        >
-            {children}
-        </table>
-    );
-});
-Table.displayName = COMPONENT_NAME;
-Table.className = CLASSNAME;
-Table.defaultProps = DEFAULT_PROPS;

package/src/components/table/TableBody.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 { TableBody, TableBodyProps } from './TableBody';
-
-const CLASSNAME = TableBody.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<TableBodyProps> = {}) => {
-    render(
-        <table>
-            <TableBody {...(props as any)} />
-        </table>,
-    );
-    const tableBody = queryByClassName(document.body, CLASSNAME);
-    return { props, tableBody };
-};
-
-describe(`<${TableBody.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tableBody',
-        forwardAttributes: 'tableBody',
-        forwardRef: 'tableBody',
-    });
-});

package/src/components/table/TableBody.tsx

@@ -1,42 +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 TableBodyProps extends GenericProps {
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TableBody';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
-
-/**
- * TableBody component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <tbody ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </tbody>
-    );
-});
-TableBody.displayName = COMPONENT_NAME;
-TableBody.className = CLASSNAME;

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',
-    });
-});