@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.16

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -1,75 +0,0 @@
-import { useMemo, useRef, useState } from 'react';
-
-import { Autocomplete, List, ListItem, Size } from '@lumx/react';
-
-import { CITIES } from './__mockData__';
-
-export default { title: 'LumX components/autocomplete/Autocomplete' };
-
-const cityNames = CITIES.map((city) => city.text);
-
-export const Simple = (args: any) => {
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [value, setValue] = useState('');
-    const inputRef = useRef(null);
-
-    const filteredCities = useMemo(
-        () =>
-            cityNames.filter((city) => {
-                const noSpacesCity = city.replace(' ', '').toLowerCase();
-                return noSpacesCity.includes(value.replace(' ', '').toLowerCase());
-            }),
-        [value],
-    );
-
-    const close = () => setShowSuggestions(false);
-
-    const setSelectedCity = (city: string) => {
-        setValue(city);
-        setShowSuggestions(false);
-    };
-    const selectItem = (city: string) => () => setSelectedCity(city);
-
-    const onChange = (newValue: string) => {
-        setValue(newValue);
-        setShowSuggestions(newValue.length > 0);
-    };
-
-    const { activeItemIndex } = List.useKeyboardListNavigation(filteredCities, inputRef, setSelectedCity);
-
-    const onFocus = () => setShowSuggestions(value.length > 0);
-
-    const hasSuggestions = filteredCities.length > 0;
-
-    return (
-        <Autocomplete
-            isOpen={showSuggestions && hasSuggestions}
-            onClose={close}
-            value={value}
-            onChange={onChange}
-            onFocus={onFocus}
-            inputRef={inputRef}
-            {...args}
-        >
-            {hasSuggestions && (
-                <List isClickable>
-                    {filteredCities.map((city, index) => (
-                        <ListItem
-                            size={Size.tiny}
-                            key={city}
-                            isHighlighted={index === activeItemIndex}
-                            onItemSelected={selectItem(city)}
-                        >
-                            <div>{city}</div>
-                        </ListItem>
-                    ))}
-                </List>
-            )}
-        </Autocomplete>
-    );
-};
-
-export const WithClearButton = Simple.bind({}) as any;
-WithClearButton.args = {
-    clearButtonProps: { label: 'Clear' },
-};

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,99 +0,0 @@
-import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { CITIES as suggestions } from './__mockData__';
-import { Autocomplete, AutocompleteProps } from './Autocomplete';
-
-const CLASSNAME = Autocomplete.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(
-        <Autocomplete {...(props as any)}>
-            <List>
-                {suggestions.map((suggestion) => (
-                    <ListItem size={Size.tiny} key={suggestion.id}>
-                        <div>{suggestion.text}</div>
-                    </ListItem>
-                ))}
-            </List>
-        </Autocomplete>,
-        { wrapper },
-    );
-    const autocomplete = getByClassName(document.body, CLASSNAME);
-    const textField = getByClassName(autocomplete, TextField.className as string);
-    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
-    const inputNative = getByTagName(autocomplete, 'input');
-    return { props, textField, getDropdown, autocomplete, inputNative };
-};
-
-describe(`<${Autocomplete.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { autocomplete, textField, getDropdown } = setup();
-
-            expect(autocomplete.className).toMatchInlineSnapshot('"lumx-autocomplete"');
-            expect(textField).toBeInTheDocument();
-            expect(getDropdown()).not.toBeInTheDocument();
-        });
-
-        it('should render open', () => {
-            const { getDropdown } = setup({ isOpen: true });
-            expect(getDropdown()).toBeInTheDocument();
-        });
-    });
-
-    describe('Events', () => {
-        it('should trigger the onChange callback when there is a change on the Text Field', async () => {
-            const name = 'autocomplete-name';
-            const onChange = vi.fn();
-            const { inputNative } = setup({
-                name,
-                onChange,
-            });
-
-            await userEvent.tab();
-            expect(inputNative).toHaveFocus();
-            await userEvent.keyboard('a');
-
-            // (text, name, event)
-            expect(onChange).toHaveBeenCalledWith('a', name, expect.any(Object));
-        });
-
-        it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
-            const onFocus = vi.fn();
-            const onBlur = vi.fn();
-            const { inputNative } = setup({
-                onFocus,
-                onBlur,
-            });
-
-            await userEvent.tab();
-            expect(inputNative).toHaveFocus();
-            expect(onFocus).toHaveBeenCalled();
-
-            await userEvent.tab();
-            expect(inputNative).not.toHaveFocus();
-            expect(onBlur).toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'autocomplete',
-        forwardAttributes: 'autocomplete',
-        forwardRef: 'autocomplete',
-        applyTheme: {
-            affects: [{ element: 'textField' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,294 +0,0 @@
-import { ReactNode, SyntheticEvent, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
-
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { useFocus } from '@lumx/react/hooks/useFocus';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-
-/**
- * Defines the props of the component.
- */
-export interface AutocompleteProps extends GenericProps, HasTheme {
-    /**
-     * Whether the suggestions list should display anchored to the input or to the wrapper.
-     * @see {@link DropdownProps#anchorToInput}
-     */
-    anchorToInput?: boolean;
-    /**
-     * Props to pass to the clear button (minus those already set by the TextField props).
-     * If not specified, the button won't be displayed.
-     * @see {@link TextFieldProps#clearButtonProps}
-     */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /**
-     * Reference to the <input> or <textarea> element.
-     * @see {@link TextFieldProps#inputRef}
-     */
-    inputRef?: TextFieldProps['inputRef'];
-    /**
-     * The offset that will be applied to the Dropdown position.
-     * @see {@link DropdownProps#offset}
-     */
-    offset?: Offset;
-    /**
-     * The preferred Dropdown location against the anchor element.
-     * @see {@link DropdownProps#placement}
-     */
-    placement?: Placement;
-    /**
-     * Manage dropdown width:
-     *   - `maxWidth`: dropdown not bigger than anchor
-     *   - `minWidth` or `true`: dropdown not smaller than anchor
-     *   - `width`: dropdown equal to the anchor.
-     * @see {@link DropdownProps#fitToAnchorWidth}
-     */
-    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
-    /**
-     * The error related to the component.
-     * @see {@link TextFieldProps#error}
-     */
-    error?: string | ReactNode;
-    /**
-     * Whether the text field is displayed with error style or not.
-     * @see {@link TextFieldProps#hasError}
-     */
-    hasError?: boolean;
-    /**
-     * Whether the text box should be focused upon closing the suggestions or not.
-     */
-    shouldFocusOnClose?: boolean;
-    /**
-     * The helper message of the text field.
-     * @see {@link TextFieldProps#helper}
-     */
-    helper?: string;
-    /**
-     * The icon of the text field (SVG path).
-     * @see {@link TextFieldProps#icon}
-     */
-    icon?: string;
-    /**
-     * Whether the component is disabled or not.
-     * @see {@link TextFieldProps#isDisabled}
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the component is required or not.
-     * @see {@link TextFieldProps#isRequired}
-     */
-    isRequired?: boolean;
-    /**
-     * Whether the text field is displayed with valid style or not.
-     * @see {@link TextFieldProps#isValid}
-     */
-    isValid?: boolean;
-    /**
-     * The label of the text field displayed in a label tag.
-     * @see {@link TextFieldProps#label}
-     */
-    label?: string;
-    /**
-     * The placeholder message of the text field.
-     * @see {@link TextFieldProps#placeholder}
-     */
-    placeholder?: string;
-    /** List of suggestions to display during autocomplete. */
-    children: React.ReactNode;
-    /**
-     * The list of chips to be displayed before the text field input.
-     */
-    chips?: React.ReactNode;
-    /**
-     * The value of the text field.
-     * @see {@link TextFieldProps#value}
-     */
-    value: string;
-    /**
-     * Whether the suggestions from the autocomplete should be displayed or not.
-     * @see {@link DropdownProps#isOpen}
-     */
-    isOpen: boolean;
-    /**
-     * The native input name property.
-     * @see {@link TextFieldProps#name}
-     */
-    name?: string;
-    /**
-     * Whether a click in the Autocomplete dropdown would close it or not.
-     * @see {@link DropdownProps#closeOnClick}
-     */
-    closeOnClick?: boolean;
-    /**
-     * Whether a click anywhere out of the Autocomplete would close it or not.
-     * @see {@link DropdownProps#closeOnClickAway}
-     */
-    closeOnClickAway?: boolean;
-    /**
-     * Whether an escape key press would close the Autocomplete or not.
-     * @see {@link DropdownProps#closeOnEscape}
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
-     * @see {@link DropdownProps#focusAnchorOnClose}
-     */
-    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
-    /**
-     * The function called on blur.
-     * @see {@link TextFieldProps#onBlur}
-     */
-    onBlur?(event: React.FocusEvent): void;
-    /**
-     * On change callback.
-     * @see {@link TextFieldProps#onChange}
-     */
-    onChange(value: string, name?: string, event?: SyntheticEvent): void;
-    /**
-     * The function called on close.
-     * @see {@link DropdownProps#onClose}
-     */
-    onClose?(): void;
-    /**
-     * The function called on focus.
-     * @see {@link TextFieldProps#onFocus}
-     */
-    onFocus?(event: React.FocusEvent): void;
-    /**
-     * The function called when the bottom of the dropdown is reached.
-     * @see {@link DropdownProps#onInfiniteScroll}
-     */
-    onInfiniteScroll?(): void;
-    /**
-     * Props forwarded to the underlying TextField component.
-     * Only the props not managed by the Autocomplete can be set.
-     * @see {@link TextFieldProps}
-     */
-    textFieldProps?: Partial<TextFieldProps>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Autocomplete';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<AutocompleteProps> = {
-    anchorToInput: false,
-    closeOnClick: false,
-    closeOnClickAway: true,
-    closeOnEscape: true,
-    shouldFocusOnClose: false,
-};
-
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        anchorToInput = DEFAULT_PROPS.anchorToInput,
-        children,
-        chips,
-        className,
-        closeOnClick = DEFAULT_PROPS.closeOnClick,
-        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
-        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-        error,
-        fitToAnchorWidth,
-        hasError,
-        helper,
-        icon,
-        inputRef,
-        clearButtonProps,
-        isRequired,
-        isOpen,
-        isValid,
-        label,
-        name,
-        offset,
-        onBlur,
-        onChange,
-        onClose,
-        onFocus,
-        onInfiniteScroll,
-        placeholder,
-        placement,
-        shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,
-        theme = defaultTheme,
-        value,
-        textFieldProps = {},
-        focusAnchorOnClose,
-        ...forwardedProps
-    } = otherProps;
-    const inputAnchorRef = useRef<HTMLElement>(null);
-    const textFieldRef = useRef(null);
-    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            <TextField
-                {...textFieldProps}
-                chips={chips}
-                error={error}
-                hasError={hasError}
-                helper={helper}
-                icon={icon}
-                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
-                clearButtonProps={clearButtonProps}
-                {...disabledStateProps}
-                isRequired={isRequired}
-                isValid={isValid}
-                label={label}
-                name={name}
-                onBlur={onBlur}
-                onChange={onChange}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                textFieldRef={textFieldRef}
-                theme={theme}
-                value={value}
-            />
-            <Dropdown
-                anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}
-                closeOnClick={closeOnClick}
-                closeOnClickAway={closeOnClickAway}
-                closeOnEscape={closeOnEscape}
-                focusAnchorOnClose={focusAnchorOnClose}
-                fitToAnchorWidth={fitToAnchorWidth}
-                isOpen={isOpen}
-                offset={offset}
-                onClose={onClose}
-                onInfiniteScroll={onInfiniteScroll}
-                placement={placement}
-                shouldFocusOnOpen={false}
-                theme={theme}
-            >
-                {children}
-            </Dropdown>
-        </div>
-    );
-});
-Autocomplete.displayName = COMPONENT_NAME;
-Autocomplete.className = CLASSNAME;
-Autocomplete.defaultProps = DEFAULT_PROPS;

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -1,167 +0,0 @@
-import { useMemo, useRef, useState } from 'react';
-
-import { AutocompleteMultiple, Chip, ChipGroup, Icon, List, ListItem, Size } from '@lumx/react';
-
-import { mdiClose, mdiFlag } from '@lumx/icons';
-
-import { CITIES } from './__mockData__';
-
-export default { title: 'LumX components/autocomplete/AutocompleteMultiple' };
-
-interface City {
-    id: string;
-    text: string;
-}
-
-export const Simple = () => {
-    const INITIAL_STATE_SHOW_SUGGESTIONS = false;
-    const INITIAL_STATE_NAVIGATION_SUGGESTION = '';
-
-    const [showSuggestions, setShowSuggestions] = useState(INITIAL_STATE_SHOW_SUGGESTIONS);
-    const [filterValue, setFilterValue] = useState('');
-    const [navigationSuggestionValue, setNavigationSuggestionValue] = useState(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    const [selectedValues, setSelectedValues] = useState<City[]>([]);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const filteredCities = useMemo(
-        () =>
-            CITIES.filter((city) => {
-                const noSpacesCity = city.text.replace(' ', '').toLowerCase();
-                return noSpacesCity.includes(filterValue.replace(' ', '').toLowerCase());
-            }),
-        [filterValue],
-    );
-
-    const hasSuggestions = filteredCities.length > 0;
-
-    const onChipDeleted = () => {
-        selectedValues.pop();
-        setSelectedValues(selectedValues);
-    };
-
-    const {
-        activeChip,
-        onBackspacePressed: chipBackspaceNavigation,
-        resetChipNavigation,
-    } = ChipGroup.useChipGroupNavigation(selectedValues, onChipDeleted);
-
-    const closeAutocomplete = () => {
-        setShowSuggestions(false);
-        resetChipNavigation();
-    };
-
-    const setSelectedCity = (city: City) => {
-        setSelectedValues([...selectedValues, city]);
-        setFilterValue('');
-        setShowSuggestions(INITIAL_STATE_SHOW_SUGGESTIONS);
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    };
-
-    const onNewCityCreated = (newCity: string) => {
-        if (!newCity || newCity.length <= 0) {
-            return;
-        }
-
-        setSelectedCity({
-            id: newCity.replace(' ', '').toLowerCase(),
-            text: newCity,
-        });
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    };
-
-    const clearSelectedValue = (city: City) => () => {
-        inputRef?.current?.focus();
-        setSelectedValues(city ? selectedValues.filter((c) => c.id !== city.id) : []);
-    };
-
-    const onChange = (value: string) => {
-        setFilterValue(value);
-        setShowSuggestions(value.length > 0);
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-        resetChipNavigation();
-    };
-
-    const onItemNavigated = (city: City) => {
-        if (city && showSuggestions) {
-            setNavigationSuggestionValue(city.text);
-        }
-    };
-
-    const isTextFieldEmpty = () => filterValue.length === 0 && !navigationSuggestionValue;
-
-    const onBackspacePressed = () => {
-        if (isTextFieldEmpty()) {
-            chipBackspaceNavigation();
-        } else if (navigationSuggestionValue) {
-            onChange(navigationSuggestionValue);
-            setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-            resetChipNavigation();
-        }
-    };
-
-    const { activeItemIndex } = List.useKeyboardListNavigation(
-        filteredCities,
-        inputRef,
-        setSelectedCity,
-        onItemNavigated,
-        onNewCityCreated,
-        onBackspacePressed,
-        true,
-    );
-
-    const onFocus = () => {
-        setShowSuggestions(filterValue.length > 0);
-    };
-
-    const onBlur = () => {
-        resetChipNavigation();
-    };
-
-    const renderChip = (city: City, index: number) => (
-        <Chip
-            isClickable
-            key={index}
-            after={<Icon icon={mdiClose} size={Size.xxs} />}
-            size={Size.s}
-            onAfterClick={clearSelectedValue(city)}
-            onClick={clearSelectedValue(city)}
-            isHighlighted={index === activeChip}
-        >
-            {city.text}
-        </Chip>
-    );
-
-    return (
-        <AutocompleteMultiple
-            isOpen={showSuggestions && hasSuggestions}
-            onClose={closeAutocomplete}
-            value={navigationSuggestionValue || filterValue}
-            onChange={onChange}
-            onFocus={onFocus}
-            values={selectedValues}
-            inputRef={inputRef}
-            shouldFocusOnClose
-            fitToAnchorWidth
-            onBlur={onBlur}
-            selectedChipRender={renderChip}
-            icon={mdiFlag}
-            label="Label"
-        >
-            <List isClickable>
-                {filteredCities.map((city, index) => {
-                    const onItemSelected = () => setSelectedCity(city);
-                    return (
-                        <ListItem
-                            size={Size.tiny}
-                            key={city.id}
-                            isHighlighted={index === activeItemIndex}
-                            onItemSelected={onItemSelected}
-                        >
-                            {city.text}
-                        </ListItem>
-                    );
-                })}
-            </List>
-        </AutocompleteMultiple>
-    );
-};

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,61 +0,0 @@
-import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-
-import { CITIES as suggestions } from './__mockData__';
-import { AutocompleteMultiple, AutocompleteMultipleProps } from './AutocompleteMultiple';
-
-const CLASSNAME = AutocompleteMultiple.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<AutocompleteMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(
-        <AutocompleteMultiple {...(props as any)}>
-            <List>
-                {suggestions.map((suggestion) => (
-                    <ListItem size={Size.tiny} key={suggestion.id}>
-                        <div>{suggestion.text}</div>
-                    </ListItem>
-                ))}
-            </List>
-        </AutocompleteMultiple>,
-        { wrapper },
-    );
-    const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
-    const textField = getByClassName(autocompleteMultiple, TextField.className as string);
-    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
-    return { props, autocompleteMultiple, textField, getDropdown };
-};
-
-describe(`<${AutocompleteMultiple.displayName}>`, () => {
-    it('should render default', () => {
-        const { autocompleteMultiple, textField, getDropdown } = setup({});
-
-        expect(autocompleteMultiple).toBeInTheDocument();
-        expect(autocompleteMultiple.className).toMatchInlineSnapshot('"lumx-autocomplete-multiple lumx-autocomplete"');
-        expect(textField).toBeInTheDocument();
-        expect(getDropdown()).not.toBeInTheDocument();
-    });
-
-    it('should render open', () => {
-        const { getDropdown } = setup({ isOpen: true });
-        expect(getDropdown()).toBeInTheDocument();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'autocompleteMultiple',
-        forwardRef: 'autocompleteMultiple',
-        forwardAttributes: 'autocompleteMultiple',
-        applyTheme: {
-            affects: [{ element: 'textField' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});