@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/select/SelectMultiple.stories.tsx

@@ -0,0 +1,227 @@
+/* istanbul ignore file */
+import { mdiTram } from '@lumx/icons/';
+import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import noop from 'lodash/noop';
+import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
+import { SelectVariant } from './constants';
+
+export default { title: 'LumX components/select/Select Multiple' };
+
+const PLACEHOLDER = 'Select values';
+const LABEL = 'Select label';
+const CHOICES = ['First item', 'Second item', 'Third item'];
+
+export const DefaultSelectMultiple = ({ theme }: any) => {
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    return (
+        <SelectMultiple
+            isOpen={isOpen}
+            value={values}
+            onClear={clearSelected}
+            clearButtonProps={{ label: 'Clear' }}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            icon={mdiTram}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={values.includes(choice)}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </SelectMultiple>
+    );
+};
+
+export const SelectMultipleWithNoData = ({ theme }: any) => {
+    return (
+        <SelectMultiple
+            isOpen
+            value={[]}
+            onClear={noop}
+            clearButtonProps={{ label: 'Clear' }}
+            label="Select label"
+            placeholder="Select values"
+            theme={theme}
+            onInputClick={noop}
+            onDropdownClose={noop}
+        >
+            <List isClickable>
+                <ListItem key={0} size={Size.tiny}>
+                    No data
+                </ListItem>
+            </List>
+        </SelectMultiple>
+    );
+};
+
+export const DisabledSelectMultiple = ({ theme }: any) => {
+    return (
+        <SelectMultiple
+            isOpen
+            value={[]}
+            onClear={noop}
+            clearButtonProps={{ label: 'Clear' }}
+            label="Select label"
+            placeholder="Select values"
+            theme={theme}
+            onInputClick={noop}
+            onDropdownClose={noop}
+            isDisabled
+        />
+    );
+};
+
+export const ChipsSelectMultiple = ({ theme }: any) => {
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    return (
+        <SelectMultiple
+            variant={SelectVariant.chip}
+            isOpen={isOpen}
+            value={values}
+            onClear={clearSelected}
+            clearButtonProps={{ label: 'Clear' }}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={values.includes(choice)}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </SelectMultiple>
+    );
+};
+
+export const ChipsCustomSelectMultiple = ({ theme }: any) => {
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    const customSelectChipRenderer = (choice: string, index: number, onClear: any, isDisabled: any) => {
+        const onClick: MouseEventHandler = (event) => onClear && onClear(event, choice);
+        return (
+            <Chip
+                key={choice}
+                isDisabled={isDisabled}
+                size={Size.s}
+                onAfterClick={onClick}
+                onClick={onClick}
+                theme={theme}
+            >
+                {choice}
+            </Chip>
+        );
+    };
+
+    return (
+        <SelectMultiple
+            isOpen={isOpen}
+            value={values}
+            onClear={clearSelected}
+            clearButtonProps={{ label: 'Clear' }}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            theme={theme}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            selectedChipRender={customSelectChipRenderer}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={values.includes(choice)}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </SelectMultiple>
+    );
+};

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

@@ -0,0 +1,405 @@
+import React, { ReactElement, RefObject } from 'react';
+
+import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
+import 'jest-enzyme';
+
+import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
+import { Kind, Theme } from '@lumx/react/components';
+import { Chip } from '@lumx/react/components/chip/Chip';
+import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
+import { Icon } from '@lumx/react/components/icon/Icon';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+import { SelectMultiple, SelectMultipleProps } from './SelectMultiple';
+import { DEFAULT_PROPS } from './WithSelectContext';
+import { SelectVariant } from './constants';
+
+const CLASSNAME = SelectMultiple.className as string;
+
+jest.mock('uid', () => ({ uid: () => 'uid' }));
+
+type SetupProps = Partial<SelectMultipleProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: SetupProps = {}, shallowRendering = true) => {
+    const setupProps: SelectMultipleProps = {
+        children: <span>Select Component</span>,
+        value: [],
+        ...props,
+    };
+
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper = renderer(<SelectMultiple {...setupProps} />);
+
+    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(SelectMultipleField)').first(),
+        chip: wrapper.find('Chip'),
+        inputWrapper: wrapper.find('.lumx-select__wrapper'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<SelectMultiple>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render defaults', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+            expect(wrapper).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+
+        it('should render chips', () => {
+            const { wrapper } = setup({
+                variant: SelectVariant.chip,
+            });
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    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 { container } = setup({
+                value: [''],
+            });
+
+            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 an item is clicked with the correct value', () => {
+            const onClear: jest.Mock = jest.fn();
+            const { input } = setup(
+                {
+                    onClear,
+                    value: ['val 1', 'val 2'],
+                    variant: SelectVariant.input,
+                    clearButtonProps: { label: 'Clear' },
+                },
+                false,
+            );
+
+            input.find('Chip').first().simulate('click');
+
+            expect(onClear).toHaveBeenCalled();
+        });
+
+        it('should call onClear when a chip is clicked with the correct value', () => {
+            const value1 = 'Value 1';
+            const value2 = 'Value 2';
+
+            const onClear: jest.Mock = jest.fn();
+            const { input } = setup(
+                {
+                    onClear,
+                    value: [value1, value2],
+                    variant: SelectVariant.chip,
+                    clearButtonProps: { label: 'Clear' },
+                },
+                false,
+            );
+
+            (input.find('Chip').first().props() as any).onAfterClick();
+
+            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 multiple values', () => {
+                const value1 = 'Value1';
+                const value2 = 'Value2';
+                const value3 = 'Value3';
+                const hasMultipleValues: Partial<SetupProps> = {
+                    value: [value1, value2, value3],
+                    variant: SelectVariant.input,
+                };
+
+                it('should render the values selected in Chips if multiple ', () => {
+                    const { input, props } = setup({ ...hasMultipleValues }, false);
+
+                    expect(input.find(Chip).length).toBe(props.value?.length);
+                    expect(input.find(Chip).at(0).children().text()).toBe(props.value?.[0]);
+                    expect(input.find(Chip).at(1).children().text()).toBe(props.value?.[1]);
+                    expect(input.find(Chip).at(2).children().text()).toBe(props.value?.[2]);
+                });
+            });
+
+            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: [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('Has multiple values', () => {
+                const value = ['v1', 'v2', 'v3'];
+
+                it('should render the value and additional text if multiple values', () => {
+                    const { input } = setup(
+                        {
+                            label: 'The label',
+                            value,
+                            variant: SelectVariant.chip,
+                        },
+                        false,
+                    );
+
+                    expect(input.find('.lumx-chip__label').text()).toEqual(`${value[0]}\u00A0+${value.length - 1}`);
+                });
+            });
+
+            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);
+                });
+            });
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
+});