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

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

@@ -1,315 +0,0 @@
-/* istanbul ignore file */
-import { mdiTram } from '@lumx/icons';
-import {
-    Chip,
-    Dialog,
-    List,
-    ListDivider,
-    ListItem,
-    ListSubheader,
-    SelectMultiple,
-    Size,
-    TextField,
-    Toolbar,
-} from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import noop from 'lodash/noop';
-import { MouseEventHandler, SyntheticEvent, useRef, 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 = () => {
-    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}
-            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 = () => {
-    return (
-        <SelectMultiple
-            isOpen
-            value={[]}
-            onClear={noop}
-            clearButtonProps={{ label: 'Clear' }}
-            label="Select label"
-            placeholder="Select values"
-            onInputClick={noop}
-            onDropdownClose={noop}
-        >
-            <List isClickable>
-                <ListItem key={0} size={Size.tiny}>
-                    No data
-                </ListItem>
-            </List>
-        </SelectMultiple>
-    );
-};
-
-export const DisabledSelectMultiple = () => {
-    return (
-        <SelectMultiple
-            isOpen
-            value={[]}
-            onClear={noop}
-            clearButtonProps={{ label: 'Clear' }}
-            label="Select label"
-            placeholder="Select values"
-            onInputClick={noop}
-            onDropdownClose={noop}
-            isDisabled
-        />
-    );
-};
-
-export const ChipsSelectMultiple = () => {
-    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}
-            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 = () => {
-    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}>
-                {choice}
-            </Chip>
-        );
-    };
-
-    return (
-        <SelectMultiple
-            isOpen={isOpen}
-            value={values}
-            onClear={clearSelected}
-            clearButtonProps={{ label: 'Clear' }}
-            label={LABEL}
-            placeholder={PLACEHOLDER}
-            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>
-    );
-};
-
-/**
- * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
- */
-export const SelectWithinADialog = () => {
-    const searchFieldRef = useRef(null);
-
-    const [searchText, setSearchText] = useState<string>();
-    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 filteredChoices =
-        searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
-
-    return (
-        <Dialog isOpen>
-            <header>
-                <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
-            </header>
-            <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
-                {/* Testing hidden input do not count in th focus trap*/}
-                <input hidden type="file" />
-                <input type="hidden" />
-
-                <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
-
-                <SelectMultiple
-                    isOpen={isOpen}
-                    value={values}
-                    onClear={clearSelected}
-                    clearButtonProps={{ label: 'Clear' }}
-                    label={LABEL}
-                    placeholder={PLACEHOLDER}
-                    onInputClick={toggleSelect}
-                    onDropdownClose={closeSelect}
-                    icon={mdiTram}
-                    focusElement={searchFieldRef}
-                >
-                    <List isClickable>
-                        <>
-                            <ListSubheader>
-                                <TextField
-                                    clearButtonProps={{ label: 'Clear' }}
-                                    placeholder="Search"
-                                    role="searchbox"
-                                    inputRef={searchFieldRef}
-                                    onChange={setSearchText}
-                                    value={searchText}
-                                />
-                            </ListSubheader>
-                            <ListDivider role="presentation" />
-                        </>
-
-                        {filteredChoices.length > 0
-                            ? filteredChoices.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>
-            </div>
-        </Dialog>
-    );
-};

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

@@ -1,213 +0,0 @@
-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',
-        },
-    });
-});