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

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

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

@@ -0,0 +1,206 @@
+import { 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

@@ -0,0 +1,147 @@
+import classNames from 'classnames';
+import { 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

@@ -0,0 +1,55 @@
+import { IconButtonProps } from '@lumx/react';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { 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

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