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

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

package/src/components/tabs/TabList.tsx

@@ -1,94 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment, Theme } from '@lumx/react';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
-
-export enum TabListLayout {
-    clustered = 'clustered',
-    fixed = 'fixed',
-}
-
-/**
- * Defines the props of the component.
- */
-export interface TabListProps extends GenericProps, HasTheme {
-    /** ARIA label (purpose of the set of tabs). */
-    ['aria-label']: string;
-    /** Tab list. */
-    children: ReactNode;
-    /** Layout of the tabs in the list. */
-    layout?: TabListLayout;
-    /** Position of the tabs in the list (requires 'clustered' layout). */
-    position?: Alignment;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TabList';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-tabs`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TabListProps> = {
-    layout: TabListLayout.fixed,
-    position: Alignment.left,
-};
-
-/**
- * TabList component.
- *
- * Implements WAI-ARIA `tablist` 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 TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        'aria-label': ariaLabel,
-        children,
-        className,
-        layout = DEFAULT_PROPS.layout,
-        position = DEFAULT_PROPS.position,
-        theme = defaultTheme,
-        ...forwardedProps
-    } = props;
-    const tabListRef = React.useRef(null);
-    useRovingTabIndex({
-        parentRef: tabListRef,
-        elementSelector: '[role="tab"]',
-        keepTabIndex: false,
-        extraDependencies: [children],
-    });
-
-    return (
-        <div
-            ref={mergeRefs(ref, tabListRef)}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}
-        >
-            <div className={`${CLASSNAME}__links`} role="tablist" aria-label={ariaLabel}>
-                {children}
-            </div>
-        </div>
-    );
-});
-TabList.displayName = COMPONENT_NAME;
-TabList.className = CLASSNAME;
-TabList.defaultProps = DEFAULT_PROPS;

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

@@ -1,37 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { render, screen } from '@testing-library/react';
-
-import { TabPanel, TabPanelProps } from './TabPanel';
-
-const CLASSNAME = TabPanel.className as string;
-
-type SetupProps = Partial<TabPanelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: TabPanelProps = { ...propsOverride, children: 'Tab panel content' };
-
-    render(<TabPanel {...props} />);
-    const tabPanel = getByClassName(document.body, CLASSNAME);
-
-    return { props, tabPanel };
-};
-
-describe(`<${TabPanel.displayName}>`, () => {
-    it('should render default', () => {
-        const content = 'Content';
-        const { tabPanel } = setup({ children: content });
-        expect(tabPanel).toBe(screen.queryByRole('tabpanel'));
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tabPanel',
-        forwardAttributes: 'tabPanel',
-        forwardRef: 'tabPanel',
-    });
-});

package/src/components/tabs/TabPanel.tsx

@@ -1,67 +0,0 @@
-import classNames from 'classnames';
-
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTabProviderContext } from '@lumx/react/components/tabs/state';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface TabPanelProps extends GenericProps {
-    /** Native id property */
-    id?: string;
-    /** Whether the tab is active or not. */
-    isActive?: boolean;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TabPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-tab-panel`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TabPanelProps> = {};
-
-/**
- * TabPanel component.
- *
- * Implements WAI-ARIA `tabpanel` 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 TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {
-    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
-
-    const state = useTabProviderContext('tabPanel', id);
-    const isActive = propIsActive || state?.isActive;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            id={state?.tabPanelId}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-            role="tabpanel"
-            tabIndex={isActive ? 0 : -1}
-            aria-labelledby={state?.tabId}
-        >
-            {(!state?.isLazy || isActive) && children}
-        </div>
-    );
-});
-TabPanel.displayName = COMPONENT_NAME;
-TabPanel.className = CLASSNAME;
-TabPanel.defaultProps = DEFAULT_PROPS;