@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/slideshow/usePaginationVisibleRange.ts

@@ -1,37 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { EDGE_FROM_ACTIVE_INDEX, PAGINATION_ITEMS_MAX } from '@lumx/react/components/slideshow/constants';
-
-type Range = { min: number; max: number };
-
-/**
- * Calculate the currently visible pagination "bullet" range.
- */
-export function usePaginationVisibleRange(activeIndex: number, slideCount: number): Range {
-    const previousVisibleRangeRef = useRef<Range>();
-    return useMemo(() => {
-        const lastSlide = slideCount - 1;
-        const { current: previousVisibleRange } = previousVisibleRangeRef;
-        let newVisibleRange: Range;
-        if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) {
-            newVisibleRange = { min: previousVisibleRange.min + 1, max: previousVisibleRange.max + 1 };
-        } else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) {
-            newVisibleRange = { min: previousVisibleRange.min - 1, max: previousVisibleRange.max - 1 };
-        } else {
-            const deltaItems = PAGINATION_ITEMS_MAX - 1;
-            let min = activeIndex - EDGE_FROM_ACTIVE_INDEX;
-            let max = activeIndex + EDGE_FROM_ACTIVE_INDEX;
-
-            if (activeIndex > lastSlide - EDGE_FROM_ACTIVE_INDEX) {
-                min = lastSlide - deltaItems;
-                max = lastSlide;
-            } else if (activeIndex < deltaItems) {
-                min = 0;
-                max = deltaItems;
-            }
-
-            newVisibleRange = { min, max };
-        }
-        previousVisibleRangeRef.current = newVisibleRange;
-        return newVisibleRange;
-    }, [activeIndex, slideCount]);
-}

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -1,92 +0,0 @@
-import React, { useEffect } from 'react';
-import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
-
-export interface UseSlideFocusManagementProps {
-    isSlideDisplayed?: boolean;
-    slideRef: React.RefObject<HTMLDivElement>;
-}
-
-/**
- * Classname set on elements whose focus was blocked.
- * This is to easily find elements that have been tempered with,
- * and not elements whose focus was already initially blocked.
- * */
-const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
-
-/**
- * Manage how slides must behave when visible or not.
- * When not visible, they should be hidden from screen readers and not focusable.
- */
-export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
-    useEffect(() => {
-        const element = slideRef?.current;
-
-        if (!element) {
-            return undefined;
-        }
-
-        /**
-         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
-         */
-        const enableSlide = () => {
-            // Hide from screen readers
-            element.setAttribute('aria-hidden', 'false');
-            // Find elements we have blocked focus on
-            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
-                focusableElement.removeAttribute('tabindex');
-                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
-            });
-        };
-
-        /**
-         * Hide given slide from screen readers and block focus on all focusable elements within.
-         */
-        const blockSlide = () => {
-            element.setAttribute('aria-hidden', 'true');
-            getFocusableElements(element).forEach((focusableElement) => {
-                focusableElement.setAttribute('tabindex', '-1');
-                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
-            });
-        };
-
-        const handleDisplay = () => {
-            if (!element) {
-                return;
-            }
-            if (isSlideDisplayed) {
-                enableSlide();
-            } else {
-                blockSlide();
-            }
-        };
-
-        // Callback function to execute when mutations are observed
-        const callback: MutationCallback = (mutationsList) => {
-            if (element) {
-                for (const mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                        handleDisplay();
-                    }
-                }
-            }
-        };
-
-        // Create an observer instance linked to the callback function
-        const observer = new MutationObserver(callback);
-
-        if (element) {
-            handleDisplay();
-
-            /** If slide is hidden, start observing for elements to block focus  */
-            if (!isSlideDisplayed) {
-                observer.observe(element, { attributes: true, childList: true, subtree: true });
-            }
-        }
-
-        return () => {
-            if (!isSlideDisplayed) {
-                observer.disconnect();
-            }
-        };
-    }, [isSlideDisplayed, slideRef]);
-};

package/src/components/slideshow/useSwipeNavigate.ts

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { detectHorizontalSwipe } from '@lumx/core/js/utils';
-
-const isTouchDevice = () => 'ontouchstart' in window;
-
-/**
- * Listen swipe to navigate left and right.
- */
-export function useSwipeNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
-    useEffect(() => {
-        if (!element || !isTouchDevice()) return undefined;
-
-        return detectHorizontalSwipe(element, (swipe) => {
-            const callback = swipe === 'right' ? onPrevious : onNext;
-            callback?.();
-        });
-    }, [onPrevious, onNext, element]);
-}

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

@@ -1,49 +0,0 @@
-import { Alignment, Switch, SwitchProps } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/switch/Switch',
-    component: Switch,
-    args: {
-        ...Switch.defaultProps,
-        children: 'Switch label',
-        name: 'switch-html-name',
-        value: 'switch-html-value',
-        isChecked: false,
-    },
-    argTypes: {
-        position: getSelectArgType<SwitchProps['position']>([Alignment.left, Alignment.right]),
-        onChange: { action: true },
-    },
-    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
-};
-
-/**
- * Default switch
- */
-export const Default = {};
-
-/**
- * Switch disabled
- */
-export const Disabled = {
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { isDisabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Switch positioned to the right
- */
-export const PositionRight = {
-    args: { position: Alignment.right },
-};

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

@@ -1,146 +0,0 @@
-import React from 'react';
-
-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 React, { 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,31 +0,0 @@
-import React from 'react';
-
-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,61 +0,0 @@
-import React from 'react';
-
-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,32 +0,0 @@
-import React from 'react';
-
-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,44 +0,0 @@
-import React from 'react';
-
-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;