@lumx/react 3.1.0 → 3.1.2

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

@@ -1,359 +0,0 @@
-import React, { ReactElement, RefObject } from 'react';
-
-import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
-import 'jest-enzyme';
-
-import { Kind, Theme } from '@lumx/react/components';
-import { Chip } from '@lumx/react/components/chip/Chip';
-import { Icon } from '@lumx/react/components/icon/Icon';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { Select, SelectProps, SelectVariant } from './Select';
-import { DEFAULT_PROPS } from './WithSelectContext';
-
-const CLASSNAME = Select.className as string;
-
-jest.mock('uid', () => ({ uid: () => 'uid' }));
-
-type SetupProps = Partial<SelectProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: SelectProps = {
-        children: <span>Select Component</span>,
-        value: '',
-        ...propsOverride,
-    };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: ShallowWrapper | ReactWrapper = renderer(<Select {...props} />);
-
-    return {
-        container: wrapper.find('div').first(),
-        dropdown: wrapper.find(Dropdown),
-        error: wrapper
-            .findWhere(
-                (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.error,
-            )
-            .first(),
-        helper: wrapper.findWhere(
-            (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.info,
-        ),
-        input: wrapper.find('#select-uid:not(SelectField)').first(),
-        chip: wrapper.find('Chip'),
-        inputWrapper: wrapper.find('.lumx-select__wrapper'),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${Select.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { container, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(container).toExist();
-            expect(container).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should have default classNames', () => {
-            const { wrapper, container } = setup();
-            wrapper.update();
-
-            expect(container).toHaveClassName(CLASSNAME);
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: 'theme', value: DEFAULT_PROPS.theme }),
-            );
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isEmpty', value: true }));
-        });
-
-        it('should use the given `theme`', () => {
-            const testedProp = 'theme';
-            const modifiedProps: SetupProps = {
-                [testedProp]: Theme.dark,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-            expect(container).not.toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS.theme }),
-            );
-        });
-
-        it('should use the given `isValid`', () => {
-            const testedProp = 'isValid';
-            const modifiedProps: SetupProps = {
-                [testedProp]: true,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-        });
-
-        it('should use the given `hasError`', () => {
-            const testedProp = 'hasError';
-            const modifiedProps: SetupProps = {
-                [testedProp]: true,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-        });
-
-        it('should display the given `error`', () => {
-            const { container, error } = setup({
-                error: 'You are not bold!',
-                hasError: true,
-            });
-
-            expect(error).toExist();
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasError', value: true }));
-        });
-
-        it('should NOT display the given `error`', () => {
-            const { container, error } = setup({
-                error: 'You are not bold!',
-                hasError: false,
-            });
-
-            expect(error).not.toExist();
-            expect(container).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasError', value: true }));
-        });
-
-        it('should use the given `value`', () => {
-            const testedProp = 'value';
-            const modifiedProps: SetupProps = {
-                [testedProp]: 'val1',
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasUnique', value: true }));
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasValue', value: true }));
-            expect(container).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isEmpty', value: true }));
-        });
-
-        it('should trigger the given `onDropdownClose` on dropdown close', () => {
-            const onDropdownClose = jest.fn();
-            const { dropdown } = setup({ onDropdownClose });
-
-            const props: any = dropdown.props();
-
-            props.onClose();
-
-            expect(onDropdownClose).toHaveBeenCalled();
-        });
-
-        it('should pass the given `isOpen` to the dropdown', () => {
-            const isOpen = true;
-            const { dropdown } = setup({ isOpen });
-
-            expect(dropdown).toHaveProp('isOpen', isOpen);
-        });
-
-        it('should display the given `helper`', () => {
-            const { helper } = setup({
-                helper: 'Be bold',
-            });
-
-            expect(helper).toExist();
-        });
-
-        it('should display the given `helper` and `error`', () => {
-            const { error, helper } = setup({
-                error: 'You are not bold!',
-                hasError: true,
-                helper: 'Be bold',
-            });
-
-            expect(error).toExist();
-            expect(helper).toExist();
-        });
-
-        it('should have a data-id as prop', () => {
-            const { inputWrapper } = setup(
-                {
-                    'data-id': 'select',
-                },
-                false,
-            );
-
-            expect(inputWrapper.prop('data-id')).toEqual('select');
-        });
-
-        it('should have a data-id as prop with Chip variant', () => {
-            const { chip } = setup(
-                {
-                    'data-id': 'select',
-                    variant: SelectVariant.chip,
-                },
-                false,
-            );
-
-            expect(chip.prop('data-id')).toEqual('select');
-        });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        const onClick: jest.Mock = jest.fn();
-
-        beforeEach(() => {
-            onClick.mockClear();
-        });
-
-        describe('should trigger `onInputClick` when the select button is clicked', () => {
-            it('with input variant', () => {
-                const { input } = setup({ onInputClick: onClick, variant: SelectVariant.input }, false);
-
-                input.simulate('click');
-
-                expect(onClick).toHaveBeenCalled();
-            });
-
-            it('with chip variant', () => {
-                const { input } = setup({ onInputClick: onClick, variant: SelectVariant.chip }, false);
-
-                input.simulate('click');
-
-                expect(onClick).toHaveBeenCalled();
-            });
-        });
-
-        it('should call onClear when clear icon is clicked in select input', () => {
-            const value = 'Value';
-            const onClear: jest.Mock = jest.fn();
-            const { input } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } }, false);
-
-            input.find('[aria-label="Clear"]').first().simulate('click');
-            expect(onClear).toHaveBeenCalled();
-        });
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        describe('Input variant', () => {
-            it('should render a div as the select input', () => {
-                const { dropdown, input } = setup({}, false);
-                const dropdownRef: RefObject<HTMLDivElement> = dropdown.prop('anchorRef');
-                expect(input.type()).toBe('div');
-                // Impossible to get the ref passed to a div so we check if ref.current is matching the input html.
-                expect(input.html()).toEqual(dropdownRef && dropdownRef.current && dropdownRef.current.outerHTML);
-            });
-
-            describe('Has value', () => {
-                const value = 'Value';
-                const hasValueProps: Partial<SetupProps> = {
-                    value,
-                    variant: SelectVariant.input,
-                };
-
-                it('should render the value selected if not multiple ', () => {
-                    const { input } = setup({ ...hasValueProps }, false);
-
-                    expect(input.find(`.${CLASSNAME}__input-native span`).first().text()).toBe(value);
-                });
-            });
-
-            describe('No value', () => {
-                const placeholder = 'My placeholder';
-                const hasNoValueProps: Partial<SetupProps> = {
-                    placeholder,
-                    value: '',
-                    variant: SelectVariant.input,
-                };
-
-                it('should render the placeholder when empty', () => {
-                    const { input } = setup({ ...hasNoValueProps }, false);
-
-                    expect(input.find(`.${CLASSNAME}__input-native--placeholder span`).first().text()).toBe(
-                        placeholder,
-                    );
-                });
-            });
-        });
-
-        describe('Chip variant', () => {
-            it('should render a Chip as the select input', () => {
-                const { input } = setup({ variant: SelectVariant.chip }, false);
-
-                expect(input.type()).toEqual(Chip);
-            });
-
-            describe('Has value', () => {
-                const value = 'Value';
-                const hasValueProps: Partial<SetupProps> = {
-                    value,
-                    variant: SelectVariant.chip,
-                };
-
-                it('should render the value', () => {
-                    const label = 'The label';
-                    const { input } = setup(
-                        {
-                            ...hasValueProps,
-                            label,
-                        },
-                        false,
-                    );
-
-                    expect(input.find('.lumx-chip__label').text()).toEqual(value);
-                });
-
-                it('should render a close icon if there is a value', () => {
-                    const { input } = setup({ ...hasValueProps }, false);
-
-                    expect(input.find(Icon).first().prop('icon')).toBe(mdiCloseCircle);
-                });
-            });
-
-            describe('No value', () => {
-                const hasNoValue: Partial<SetupProps> = {
-                    value: '',
-                    variant: SelectVariant.chip,
-                };
-
-                it('should render the label', () => {
-                    const label = 'The label';
-                    const { input } = setup({ ...hasNoValue, label }, false);
-
-                    expect(input.find('.lumx-chip__label').text()).toEqual(label);
-                });
-
-                it('should render a MenuDown icon', () => {
-                    const { input } = setup({ ...hasNoValue }, false);
-
-                    expect(input.find(Icon).first().prop('icon')).toBe(mdiMenuDown);
-                });
-            });
-        });
-    });
-
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,193 +0,0 @@
-import React, { forwardRef, 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/react/components';
-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 { Comp } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-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,
-};
-
-const stopPropagation = (evt: Event) => evt.stopPropagation();
-
-/**
- * Select component.
- */
-const SelectField: React.FC<SelectProps> = ({
-    anchorRef,
-    clearButtonProps,
-    handleKeyboardNav,
-    hasError,
-    hasInputClear,
-    icon,
-    id,
-    isDisabled,
-    isEmpty,
-    isRequired,
-    isValid,
-    label,
-    onClear,
-    onInputClick,
-    placeholder,
-    selectedValueRender,
-    theme,
-    value,
-    variant,
-    ...forwardedProps
-}) => {
-    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={anchorRef as RefObject<HTMLDivElement>}
-                        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={anchorRef as RefObject<HTMLAnchorElement>}
-                    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: Comp<SelectProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const isEmpty = lodashIsEmpty(props.value);
-    const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
-
-    return WithSelectContext(
-        SelectField,
-        {
-            ...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;