@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,181 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { List, ListItem, Size } from '@lumx/react';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { Autocomplete, AutocompleteProps } from './Autocomplete';
+
+import { CITIES as suggestions } from './__mockData__';
+
+const CLASSNAME = Autocomplete.className as string;
+
+type SetupProps = Partial<AutocompleteProps>;
+
+interface Suggestion {
+    id: string;
+    text: string;
+}
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+    const props: any = { ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+
+    const wrapper: Wrapper = renderer(<Autocomplete {...props} />);
+
+    const textField: Wrapper = wrapper.find('TextField');
+    const dropdown: Wrapper = wrapper.find('Dropdown');
+
+    return { dropdown, props, textField, wrapper };
+};
+
+describe(`<${Autocomplete.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', () => {
+            const { wrapper, textField, dropdown } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                label: 'Field label',
+                isOpen: true,
+                isRequired: true,
+                onChange: jest.fn(),
+                value: '',
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+
+            expect(textField).toHaveLength(1);
+            expect(dropdown).toHaveLength(1);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { wrapper } = setup();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+
+        it('should render correctly when the dropdown is closed', () => {
+            const { wrapper } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                isOpen: false,
+                onChange: jest.fn(),
+                value: '',
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        it('should trigger the onChange callback when there is a change on the Text Field', () => {
+            const onChange = jest.fn();
+            const { textField } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                isOpen: false,
+                onChange,
+                value: '',
+            });
+
+            textField.simulate('change');
+
+            expect(onChange).toHaveBeenCalled();
+        });
+
+        it('should trigger the onFocus callback when the text field is focused on', () => {
+            const onFocus = jest.fn();
+            const { textField } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                isOpen: false,
+                onFocus,
+                value: '',
+            });
+
+            textField.simulate('focus');
+
+            expect(onFocus).toHaveBeenCalled();
+        });
+
+        it('should trigger the onBlur callback when the Text Field loses focus', () => {
+            const onBlur = jest.fn();
+            const { textField } = setup({
+                children: (
+                    <List isClickable>
+                        {suggestions.map((suggestion: Suggestion) => (
+                            <ListItem size={Size.tiny} key={suggestion.id}>
+                                <div>{suggestion.text}</div>
+                            </ListItem>
+                        ))}
+                    </List>
+                ),
+                isOpen: false,
+                onBlur,
+                value: '',
+            });
+
+            textField.simulate('blur');
+
+            expect(onBlur).toHaveBeenCalled();
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

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

@@ -0,0 +1,292 @@
+import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useFocus } from '@lumx/react/hooks/useFocus';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+/**
+ * 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;
+    /**
+     * 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: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        anchorToInput,
+        children,
+        chips,
+        className,
+        closeOnClick,
+        closeOnClickAway,
+        closeOnEscape,
+        disabled,
+        error,
+        fitToAnchorWidth,
+        hasError,
+        helper,
+        icon,
+        inputRef,
+        clearButtonProps,
+        isDisabled = disabled,
+        isRequired,
+        isOpen,
+        isValid,
+        label,
+        name,
+        offset,
+        onBlur,
+        onChange,
+        onClose,
+        onFocus,
+        onInfiniteScroll,
+        placeholder,
+        placement,
+        shouldFocusOnClose,
+        theme,
+        value,
+        textFieldProps = {},
+        ...forwardedProps
+    } = props;
+    const inputAnchorRef = useRef<HTMLElement>(null);
+    const textFieldRef = useRef(null);
+    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+        >
+            <TextField
+                {...textFieldProps}
+                chips={chips}
+                error={error}
+                hasError={hasError}
+                helper={helper}
+                icon={icon}
+                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
+                clearButtonProps={clearButtonProps}
+                isDisabled={isDisabled}
+                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}
+                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/dist/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -0,0 +1,170 @@
+import React, { 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 = ({ theme }: any) => {
+    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
+            theme={theme}
+            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
+            theme={theme}
+            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 theme={theme}>
+                {filteredCities.map((city, index) => {
+                    const onItemSelected = () => setSelectedCity(city);
+                    return (
+                        <ListItem
+                            size={Size.tiny}
+                            theme={theme}
+                            key={city.id}
+                            isHighlighted={index === activeItemIndex}
+                            onItemSelected={onItemSelected}
+                        >
+                            {city.text}
+                        </ListItem>
+                    );
+                })}
+            </List>
+        </AutocompleteMultiple>
+    );
+};