@lumx/react 3.21.1 → 3.21.2-alpha.0

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

@@ -1,385 +0,0 @@
-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 React, { 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

@@ -1,201 +0,0 @@
-import { Mock } from 'vitest';
-import React from 'react';
-
-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',
-        },
-    });
-});