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

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

@@ -1,199 +0,0 @@
-import { Mock } from 'vitest';
-import { Theme } from '@lumx/core/js/constants';
-import { Chip } from '@lumx/react/components/chip/Chip';
-import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render, within } from '@testing-library/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
-
-import { Select, SelectProps, SelectVariant } from './Select';
-
-const CLASSNAME = Select.className as string;
-
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
-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 = (propsOverride: Partial<SelectProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: SelectProps = {
-        children: <span>Select Component</span>,
-        value: '',
-        ...propsOverride,
-    };
-    render(<Select {...props} />, { 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 = queryByClassName(select, Chip.className as string);
-    return { props, select, getDropdown, helpers, inputWrapper, chip };
-};
-
-describe(`<${Select.displayName}>`, () => {
-    (isFocusVisible as Mock).mockReturnValue(false);
-
-    describe('Props', () => {
-        it('should have default classNames', () => {
-            const { select, getDropdown } = setup();
-            expect(getDropdown()).not.toBeInTheDocument();
-            expect(select.className).toMatchInlineSnapshot(
-                '"lumx-select lumx-select--has-unique 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 `hasError`', () => {
-            const { select } = setup({ hasError: true });
-            expect(select).toHaveClass(`${CLASSNAME}--has-error`);
-        });
-
-        it('should use the given `value`', () => {
-            const { select, inputWrapper, props } = setup({ value: 'val1' });
-            expect(select).toHaveClass(`${CLASSNAME}--has-unique`);
-            expect(select).toHaveClass(`${CLASSNAME}--has-value`);
-            expect(select).not.toHaveClass(`${CLASSNAME}--is-empty`);
-            expect(inputWrapper).toHaveTextContent(props.value);
-        });
-
-        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);
-            });
-        });
-
-        it('should have a data-id as prop', () => {
-            const { inputWrapper } = setup({ 'data-id': 'select' });
-            expect(inputWrapper).toHaveAttribute('data-id', 'select');
-        });
-
-        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-unique lumx-select lumx-select--is-empty lumx-select--theme-light"',
-                );
-            });
-
-            it('should render chip variant with value', () => {
-                const { select, chip, props } = setup({ variant: SelectVariant.chip, value: 'val1' });
-                expect(chip).toHaveTextContent(props.value);
-                expect(select.className).toMatchInlineSnapshot(
-                    '"lumx-select lumx-select--has-unique 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', () => {
-        it('should trigger `onDropdownClose` on escape', async () => {
-            const onDropdownClose = vi.fn();
-            const { getDropdown } = setup({ isOpen: true, onDropdownClose });
-
-            const dropdown = getDropdown();
-            expect(dropdown).toBeInTheDocument();
-
-            await userEvent.keyboard('[Escape]');
-            expect(onDropdownClose).toHaveBeenCalled();
-        });
-
-        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 clear icon is clicked in select input', async () => {
-            const value = 'Value';
-            const onClear = vi.fn();
-            const { select, props } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } });
-
-            const clearButton = within(select).getByRole('button', { name: props.clearButtonProps?.label });
-
-            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/Select.tsx

@@ -1,199 +0,0 @@
-import { RefObject } from 'react';
-
-import classNames from 'classnames';
-import lodashIsEmpty from 'lodash/isEmpty';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
-import { IconButton } from '@lumx/react/components/button/IconButton';
-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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { WithSelectContext } from './WithSelectContext';
-import { CoreSelectProps, SelectVariant } from './constants';
-
-/** Defines the props of the component. */
-export interface SelectProps extends CoreSelectProps {
-    /** Selected value. */
-    value: string;
-}
-
-export { SelectVariant };
-
-/** 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<SelectProps> = {
-    selectedValueRender: (choice) => choice,
-    variant: SelectVariant.input,
-};
-
-const stopPropagation = (evt: Event) => evt.stopPropagation();
-
-/**
- * Select component.
- */
-const SelectField: React.FC<SelectProps> = (props) => {
-    const defaultTheme = useTheme();
-    const {
-        anchorRef,
-        clearButtonProps,
-        handleKeyboardNav,
-        hasError,
-        hasInputClear,
-        icon,
-        id,
-        isDisabled,
-        isEmpty,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onInputClick,
-        placeholder,
-        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={classNames([
-                                `${CLASSNAME}__input-native`,
-                                isEmpty && placeholder && `${CLASSNAME}__input-native--placeholder`,
-                            ])}
-                        >
-                            {!isEmpty && <span>{selectedValueRender?.(value)}</span>}
-
-                            {isEmpty && placeholder && <span>{placeholder}</span>}
-                        </div>
-
-                        {(isValid || hasError) && (
-                            <div className={`${CLASSNAME}__input-validity`}>
-                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
-                            </div>
-                        )}
-
-                        {hasInputClear && clearButtonProps && (
-                            <IconButton
-                                {...clearButtonProps}
-                                className={`${CLASSNAME}__input-clear`}
-                                icon={mdiCloseCircle}
-                                emphasis={Emphasis.low}
-                                size={Size.s}
-                                theme={theme}
-                                onClick={onClear}
-                                onKeyDown={stopPropagation}
-                            />
-                        )}
-
-                        <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>{selectedValueRender?.(value)}</span>}
-                </Chip>
-            )}
-        </>
-    );
-};
-
-/**
- * Select component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
-    const isEmpty = lodashIsEmpty(props.value);
-    const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
-
-    return WithSelectContext(
-        SelectField,
-        {
-            ...DEFAULT_PROPS,
-            ...props,
-            className: classNames(
-                props.className,
-                handleBasicClasses({
-                    hasInputClear,
-                    hasUnique: !props.isEmpty,
-                    prefix: CLASSNAME,
-                }),
-            ),
-            hasInputClear,
-            isEmpty,
-        },
-        ref,
-    );
-});
-Select.displayName = COMPONENT_NAME;
-Select.className = CLASSNAME;
-Select.defaultProps = DEFAULT_PROPS;
-Select.className = CLASSNAME;