@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/select/SelectMultiple.test.tsx

@@ -1,215 +0,0 @@
-import React from 'react';
-
-import { Theme } from '@lumx/core/js/constants';
-import { Chip } from '@lumx/react/components/chip/Chip';
-import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, within } from '@testing-library/react';
-import {
-    getAllByClassName,
-    getByClassName,
-    queryAllByClassName,
-    queryByClassName,
-} from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-
-import { SelectMultiple, SelectMultipleProps } from './SelectMultiple';
-import { SelectVariant } from './constants';
-
-const CLASSNAME = SelectMultiple.className as string;
-
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SelectMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const setupProps: SelectMultipleProps = {
-        children: <span>Select Component</span>,
-        value: [],
-        ...props,
-    };
-    render(<SelectMultiple {...setupProps} />, { wrapper });
-    const select = getByClassName(document.body, CLASSNAME);
-    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
-    const helpers = queryAllByClassName(select, `${CLASSNAME}__helper`);
-    const inputWrapper = queryByClassName(select, `${CLASSNAME}__wrapper`);
-    const chip = !inputWrapper ? queryByClassName(select, Chip.className as string) : null;
-    const valueChips = queryByClassName(select, `${CLASSNAME}__chips`);
-    return { props, select, getDropdown, helpers, inputWrapper, chip, valueChips };
-};
-
-describe('<SelectMultiple>', () => {
-    describe('Props', () => {
-        it('should have default classNames', () => {
-            const { select, inputWrapper, valueChips, chip } = setup();
-
-            expect(inputWrapper).toBeInTheDocument();
-            expect(valueChips).toBeEmptyDOMElement();
-            expect(chip).not.toBeInTheDocument();
-            expect(select.className).toMatchInlineSnapshot(
-                '"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"',
-            );
-        });
-
-        it('should use the given `theme`', () => {
-            const { select } = setup({ theme: Theme.dark });
-            expect(select).toHaveClass(`${CLASSNAME}--theme-dark`);
-        });
-
-        it('should use the given `isValid`', () => {
-            const { select } = setup({ isValid: true });
-            expect(select).toHaveClass(`${CLASSNAME}--is-valid`);
-        });
-
-        it('should use the given `value`', () => {
-            const { select, valueChips } = setup({ value: ['val1', 'val2'] });
-
-            expect(select).not.toHaveClass(`${CLASSNAME}--is-empty`);
-            expect(select).toHaveClass(`${CLASSNAME}--has-value`);
-            expect(valueChips).not.toBeEmptyDOMElement();
-            expect(within(valueChips as any).queryByText('val1')).toBeInTheDocument();
-            expect(within(valueChips as any).queryByText('val2')).toBeInTheDocument();
-        });
-
-        it('should pass the given `isOpen` to the dropdown', () => {
-            const { getDropdown } = setup({ isOpen: true });
-            expect(getDropdown()).toBeInTheDocument();
-        });
-
-        describe('helpers', () => {
-            it('should display the given `error`', () => {
-                const { select, helpers, props } = setup({ hasError: true, error: 'You are not bold!' });
-                expect(select).toHaveClass(`${CLASSNAME}--has-error`);
-                expect(helpers.length).toBe(1);
-                expect(helpers[0]).toHaveTextContent(props.error as string);
-            });
-
-            it('should NOT display the given `error`', () => {
-                const { select, helpers } = setup({
-                    error: 'You are not bold!',
-                    hasError: false,
-                });
-                expect(select).not.toHaveClass(`${CLASSNAME}--has-error`);
-                expect(helpers.length).toBe(0);
-            });
-
-            it('should display the given `helper`', () => {
-                const { helpers, props } = setup({ helper: 'Be bold' });
-                expect(helpers.length).toBe(1);
-                expect(helpers[0]).toHaveTextContent(props.helper as string);
-            });
-
-            it('should display the given `helper` and `error`', () => {
-                const { select, helpers, props } = setup({
-                    error: 'You are not bold!',
-                    hasError: true,
-                    helper: 'Be bold',
-                });
-                expect(select).toHaveClass(`${CLASSNAME}--has-error`);
-                expect(helpers.length).toBe(2);
-                expect(helpers[0]).toHaveTextContent(props.error as string);
-                expect(helpers[1]).toHaveTextContent(props.helper as string);
-            });
-        });
-
-        describe('chip variant', () => {
-            it('should render chip variant', () => {
-                const { select, inputWrapper, chip } = setup({ variant: SelectVariant.chip });
-                expect(inputWrapper).not.toBeInTheDocument();
-                expect(chip).toBeInTheDocument();
-                expect(select.className).toMatchInlineSnapshot(
-                    '"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"',
-                );
-            });
-
-            it('should render chip variant with value', () => {
-                const { select, chip } = setup({ variant: SelectVariant.chip, value: ['val1', 'val2'] });
-                expect(chip).toHaveTextContent('val1 +1');
-                expect(select.className).toMatchInlineSnapshot(
-                    '"lumx-select lumx-select--has-multiple lumx-select lumx-select--has-value lumx-select--theme-light"',
-                );
-            });
-
-            it('should forward prop to chip variant', () => {
-                const { chip } = setup({
-                    'data-id': 'select',
-                    variant: SelectVariant.chip,
-                });
-                expect(chip).toHaveAttribute('data-id', 'select');
-            });
-        });
-    });
-
-    describe('Events', () => {
-        describe('should trigger `onInputClick` when the select button is clicked', () => {
-            it('with input variant', async () => {
-                const onClick = vi.fn();
-                const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
-
-                await userEvent.click(inputWrapper as any);
-                expect(onClick).toHaveBeenCalled();
-            });
-
-            it('with chip variant', async () => {
-                const onClick = vi.fn();
-                const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
-
-                await userEvent.click(chip as any);
-                expect(onClick).toHaveBeenCalled();
-            });
-        });
-
-        it('should call onClear when an item is clicked with the correct value', async () => {
-            const onClear = vi.fn();
-            const { valueChips } = setup({
-                onClear,
-                value: ['val 1', 'val 2'],
-                variant: SelectVariant.input,
-            });
-
-            const clearButtons = getAllByClassName(
-                valueChips as any,
-                `${Chip.className as string}__after--is-clickable`,
-            );
-
-            expect(clearButtons.length).toBe(2);
-
-            await userEvent.click(clearButtons[1]);
-
-            expect(onClear).toHaveBeenCalledWith(expect.any(Object), 'val 2');
-        });
-
-        it('should clear all with chip variant', async () => {
-            const value1 = 'Value 1';
-            const value2 = 'Value 2';
-
-            const onClear = vi.fn();
-            const { chip } = setup({
-                onClear,
-                value: [value1, value2],
-                variant: SelectVariant.chip,
-            });
-
-            const clearButton = getByClassName(chip as any, `${Chip.className as string}__after--is-clickable`);
-
-            await userEvent.click(clearButton);
-
-            expect(onClear).toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'select',
-        forwardAttributes: 'inputWrapper',
-        forwardRef: 'select',
-        applyTheme: {
-            affects: [{ element: 'select' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/select/SelectMultiple.tsx

@@ -1,206 +0,0 @@
-import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Size, Theme } from '@lumx/core/js/constants';
-import { Chip } from '@lumx/react/components/chip/Chip';
-import { Icon } from '@lumx/react/components/icon/Icon';
-import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { WithSelectContext } from './WithSelectContext';
-import { CoreSelectProps, SelectVariant } from './constants';
-
-/** Defines the props of the component. */
-export interface SelectMultipleProps extends CoreSelectProps {
-    /** Selected values. */
-    value: string[];
-    /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender?(
-        choice: string,
-        index: number,
-        onClear?: (event: SyntheticEvent, choice: string) => void,
-        isDisabled?: boolean,
-        theme?: any,
-    ): ReactNode | string;
-}
-
-/** The display name of the component. */
-const COMPONENT_NAME = 'Select';
-
-/** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/** The default value of props. */
-const DEFAULT_PROPS: Partial<SelectMultipleProps> = {
-    selectedChipRender(choice, index, onClear, isDisabled?, theme?) {
-        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);
-        return (
-            <Chip
-                key={index}
-                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}
-                isDisabled={isDisabled}
-                size={Size.s}
-                onAfterClick={onClick}
-                onClick={onClick}
-                theme={theme}
-            >
-                {choice}
-            </Chip>
-        );
-    },
-    selectedValueRender: (choice) => choice,
-    variant: SelectVariant.input,
-};
-
-export const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {
-    const defaultTheme = useTheme();
-    const {
-        anchorRef,
-        handleKeyboardNav,
-        hasError,
-        icon,
-        id,
-        isDisabled,
-        isEmpty,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onInputClick,
-        placeholder,
-        selectedChipRender,
-        selectedValueRender,
-        theme = defaultTheme,
-        value,
-        variant,
-        selectElementRef,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <>
-            {variant === SelectVariant.input && (
-                <>
-                    {label && (
-                        <div className={`${CLASSNAME}__header`}>
-                            <InputLabel
-                                htmlFor={id}
-                                className={`${CLASSNAME}__label`}
-                                isRequired={isRequired}
-                                theme={theme}
-                            >
-                                {label}
-                            </InputLabel>
-                        </div>
-                    )}
-
-                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                    <div
-                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
-                        id={id}
-                        className={`${CLASSNAME}__wrapper`}
-                        onClick={onInputClick}
-                        onKeyDown={handleKeyboardNav}
-                        tabIndex={isDisabled ? undefined : 0}
-                        aria-disabled={isDisabled || undefined}
-                        {...forwardedProps}
-                    >
-                        {icon && (
-                            <Icon
-                                className={`${CLASSNAME}__input-icon`}
-                                color={theme === Theme.dark ? 'light' : undefined}
-                                icon={icon}
-                                size={Size.xs}
-                            />
-                        )}
-
-                        <div className={`${CLASSNAME}__chips`}>
-                            {!isEmpty &&
-                                value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}
-                        </div>
-
-                        {isEmpty && placeholder && (
-                            <div
-                                className={classNames([
-                                    `${CLASSNAME}__input-native`,
-                                    `${CLASSNAME}__input-native--placeholder`,
-                                ])}
-                            >
-                                <span>{placeholder}</span>
-                            </div>
-                        )}
-
-                        {(isValid || hasError) && (
-                            <div className={`${CLASSNAME}__input-validity`}>
-                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
-                            </div>
-                        )}
-
-                        <div className={`${CLASSNAME}__input-indicator`}>
-                            <Icon icon={mdiMenuDown} size={Size.s} />
-                        </div>
-                    </div>
-                </>
-            )}
-
-            {variant === SelectVariant.chip && (
-                <Chip
-                    id={id}
-                    isSelected={!isEmpty}
-                    isDisabled={isDisabled}
-                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
-                    onAfterClick={isEmpty ? onInputClick : onClear}
-                    onClick={onInputClick}
-                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
-                    theme={theme}
-                    {...forwardedProps}
-                >
-                    {isEmpty && <span>{label}</span>}
-
-                    {!isEmpty && (
-                        <span>
-                            <span>{selectedValueRender?.(value[0])}</span>
-
-                            {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}
-                        </span>
-                    )}
-                </Chip>
-            )}
-        </>
-    );
-};
-
-/**
- * SelectMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {
-    return WithSelectContext(
-        SelectMultipleField,
-        {
-            ...DEFAULT_PROPS,
-            ...props,
-            className: classNames(
-                props.className,
-                handleBasicClasses({
-                    hasMultiple: !props.isEmpty,
-                    prefix: CLASSNAME,
-                }),
-            ),
-            isEmpty: props.value.length === 0,
-            isMultiple: true,
-        },
-        ref,
-    );
-});
-SelectMultiple.displayName = COMPONENT_NAME;
-SelectMultiple.className = CLASSNAME;
-SelectMultiple.defaultProps = DEFAULT_PROPS;

package/src/components/select/WithSelectContext.tsx

@@ -1,147 +0,0 @@
-import classNames from 'classnames';
-import React, { Ref, useCallback, useRef } from 'react';
-
-import { Placement } from '@lumx/react';
-import { Kind, Theme } from '@lumx/core/js/constants';
-import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { CoreSelectProps } from './constants';
-
-/** The display name of the component. */
-const COMPONENT_NAME = 'Select';
-
-/** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-export const WithSelectContext = (
-    SelectElement: React.FC<any>,
-    props: CoreSelectProps,
-    ref: Ref<HTMLDivElement>,
-): React.ReactElement => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        children,
-        className,
-        focusElement,
-        isMultiple,
-        closeOnClick = !isMultiple,
-        disabled,
-        error,
-        hasError,
-        helper,
-        id,
-        isDisabled = disabled,
-        isEmpty,
-        isOpen,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onDropdownClose,
-        onInfiniteScroll,
-        onInputClick,
-        placeholder,
-        theme = defaultTheme,
-        value,
-        variant,
-        ...forwardedProps
-    } = props;
-    const generatedSelectId = useId();
-    const selectId = id || generatedSelectId;
-    const anchorRef = useRef<HTMLElement>(null);
-    const selectRef = useRef<HTMLDivElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const isFocus = useListenFocus(anchorRef);
-
-    const handleKeyboardNav = useCallback(
-        (evt: React.KeyboardEvent<HTMLElement>) => {
-            if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
-                evt.preventDefault();
-                onInputClick();
-            }
-        },
-        [onInputClick],
-    );
-
-    const onClose = () => {
-        if (onDropdownClose) {
-            onDropdownClose();
-        }
-        anchorRef?.current?.blur();
-    };
-
-    // Handle focus trap.
-    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
-
-    return (
-        <div
-            ref={mergeRefs(ref, selectRef)}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    hasError,
-                    hasLabel: Boolean(label),
-                    hasPlaceholder: Boolean(placeholder),
-                    hasValue: !isEmpty,
-                    isDisabled,
-                    isEmpty,
-                    isFocus,
-                    isOpen,
-                    isValid,
-                    prefix: CLASSNAME,
-                    theme: theme === Theme.light ? Theme.light : Theme.dark,
-                }),
-            )}
-        >
-            <SelectElement
-                {...forwardedProps}
-                anchorRef={anchorRef}
-                aria-disabled={isDisabled}
-                handleKeyboardNav={handleKeyboardNav}
-                hasError={hasError}
-                isDisabled={isDisabled}
-                isEmpty={isEmpty}
-                isRequired={isRequired}
-                isValid={isValid}
-                label={label}
-                placeholder={placeholder}
-                id={selectId}
-                theme={theme}
-                value={value}
-                variant={variant}
-                onClear={onClear}
-                onInputClick={onInputClick}
-            />
-            <Dropdown
-                anchorRef={anchorRef}
-                closeOnClick={closeOnClick}
-                closeOnClickAway
-                closeOnEscape
-                isOpen={!!isOpen}
-                placement={Placement.BOTTOM_START}
-                onClose={onClose}
-                onInfiniteScroll={onInfiniteScroll}
-                ref={dropdownRef}
-            >
-                {children}
-            </Dropdown>
-            {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>
-                    {error}
-                </InputHelper>
-            )}
-            {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
-                    {helper}
-                </InputHelper>
-            )}
-        </div>
-    );
-};

package/src/components/select/constants.ts

@@ -1,55 +0,0 @@
-import { IconButtonProps } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import React, { ReactNode, SyntheticEvent } from 'react';
-
-/**
- * Select variants.
- */
-export const SelectVariant = { input: 'input', chip: 'chip' } as const;
-export type SelectVariant = ValueOf<typeof SelectVariant>;
-
-export interface CoreSelectProps extends GenericProps, HasTheme {
-    /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /** Whether the select (input variant) is displayed with error style or not. */
-    hasError?: boolean;
-    /** Error message. */
-    error?: string | ReactNode;
-    /** Helper text. */
-    helper?: string;
-    /** Whether the select should close on click. */
-    closeOnClick?: boolean;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Whether the select (input variant) is displayed with valid style or not. */
-    isValid?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Placeholder input text. */
-    placeholder?: string;
-    /** Select variant. */
-    variant?: SelectVariant;
-    /** On clear callback. */
-    onClear?(event: SyntheticEvent, value?: string): void;
-    /** On blur callback. */
-    onBlur?(): void;
-    /** On filter text change callback (with 500ms debounce). */
-    onFilter?(): void;
-    /** On input click callback (can be used for dropdown toggle). */
-    onInputClick?(): void;
-    /** On dropdown close callback. */
-    onDropdownClose?(): void;
-    /** On scroll end callback. */
-    onInfiniteScroll?(): void;
-    /** Render value function. Default: Renders the value as a string. */
-    selectedValueRender?(choice: string): ReactNode | string;
-    /** Children */
-    children?: React.ReactNode;
-}

package/src/components/select/index.ts

@@ -1,2 +0,0 @@
-export * from './Select';
-export * from './SelectMultiple';