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

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

@@ -0,0 +1,385 @@
+import { mdiBullhornOutline } from '@lumx/icons';
+import { List, ListItem, Select, Size, TextField } from '@lumx/react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import noop from 'lodash/noop';
+import range from 'lodash/range';
+import { SyntheticEvent, useState } from 'react';
+import { SelectVariant } from './constants';
+
+export default {
+    title: 'LumX components/select/Select',
+    component: Select,
+};
+
+const CHOICES = ['First item', 'Second item', 'Third item'];
+
+export const SimpleSelect = () => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            icon={mdiBullhornOutline}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const SimpleSelectWithInfiniteScroll = () => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+    const [items, setItems] = useState(CHOICES);
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onInfinite = () => {
+        setItems([...items, ...range(10).map((i) => `item ${items.length + i}`)]);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            onInfiniteScroll={onInfinite}
+        >
+            <List isClickable>
+                {items.length > 0
+                    ? items.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const DisabledSelect = () => {
+    return (
+        <Select
+            isOpen={false}
+            value=""
+            label="My select"
+            placeholder="Placeholder"
+            onInputClick={noop}
+            onDropdownClose={noop}
+            isDisabled
+        >
+            <List isClickable>
+                <ListItem key={0} size={Size.tiny}>
+                    No data
+                </ListItem>
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithClearButton = () => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, newValue: string) => {
+        event.stopPropagation();
+        setValue(newValue);
+    };
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            onClear={clearSelected}
+            clearButtonProps={{ label: 'Clear' }}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithAnotherField = () => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [blurred, setWasBlurred] = useState('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, newValue: string) => {
+        event.stopPropagation();
+        setValue(newValue);
+    };
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onBlur = () => {
+        setWasBlurred('was blurred');
+    };
+
+    return (
+        <>
+            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" onChange={noop} />
+            <Select
+                style={{ width: '100%' }}
+                isOpen={isOpen}
+                value={value}
+                onClear={clearSelected}
+                clearButtonProps={{ label: 'Clear' }}
+                label={LABEL}
+                placeholder={PLACEHOLDER}
+                onInputClick={toggleSelect}
+                onDropdownClose={closeSelect}
+                onBlur={onBlur}
+            >
+                <List isClickable>
+                    {CHOICES.length > 0
+                        ? CHOICES.map((choice) => (
+                              <ListItem
+                                  isSelected={value === choice}
+                                  key={choice}
+                                  onItemSelected={selectItem(choice)}
+                                  size={Size.tiny}
+                              >
+                                  {choice}
+                              </ListItem>
+                          ))
+                        : [
+                              <ListItem key={0} size={Size.tiny}>
+                                  No data
+                              </ListItem>,
+                          ]}
+                </List>
+            </Select>
+            {blurred}
+        </>
+    );
+};
+
+export const SelectWithNoData = () => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(true);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label="My select"
+            placeholder="Placeholder"
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List isClickable>
+                <ListItem key={0} size={Size.tiny}>
+                    No data
+                </ListItem>
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithHelper = () => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label="Country"
+            placeholder="Your country"
+            helper="This is used in analytics"
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+        >
+            <List isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithError = () => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label="Country"
+            placeholder="Your country"
+            helper="This is used in analytics"
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            hasError
+            error="Please select something :)"
+        >
+            <List isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectSuccess = () => {
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    return (
+        <Select
+            isOpen={isOpen}
+            value=""
+            label="Country"
+            placeholder="Your country"
+            helper="This is used in analytics"
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            isValid
+        >
+            <List isClickable>
+                {CHOICES.map((choice) => (
+                    <ListItem key={choice} size={Size.tiny}>
+                        {choice}
+                    </ListItem>
+                ))}
+            </List>
+        </Select>
+    );
+};
+
+export const SelectWithChipVariant = () => {
+    const PLACEHOLDER = 'Select a value';
+    const LABEL = 'Select label';
+
+    const [value, setValue] = useState<string>('');
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const selectItem = (item: string) => () => {
+        closeSelect();
+        setValue(item);
+    };
+
+    const onClear = () => setValue('');
+
+    return (
+        <Select
+            style={{ width: '100%' }}
+            isOpen={isOpen}
+            value={value}
+            label={LABEL}
+            placeholder={PLACEHOLDER}
+            onInputClick={toggleSelect}
+            onDropdownClose={closeSelect}
+            variant={SelectVariant.chip}
+            onClear={onClear}
+            clearButtonProps={{ label: 'Clear' }}
+        >
+            <List isClickable>
+                {CHOICES.length > 0
+                    ? CHOICES.map((choice) => (
+                          <ListItem
+                              isSelected={value === choice}
+                              key={choice}
+                              onItemSelected={selectItem(choice)}
+                              size={Size.tiny}
+                          >
+                              {choice}
+                          </ListItem>
+                      ))
+                    : [
+                          <ListItem key={0} size={Size.tiny}>
+                              No data
+                          </ListItem>,
+                      ]}
+            </List>
+        </Select>
+    );
+};

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

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