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

package/src/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,167 @@
+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

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

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -0,0 +1,156 @@
+import { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { mdiClose } from '@lumx/icons';
+
+import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+
+/**
+ * Defines the props of the component.
+ */
+export interface AutocompleteMultipleProps extends AutocompleteProps {
+    /** Selected values. */
+    values: any[];
+    /** Alignment of the chips in the autocomplete. */
+    chipsAlignment?: HorizontalAlignment;
+    /** Selected value render function. Default: Renders the value inside of a Chip. */
+    selectedChipRender(
+        choice: any,
+        index: number,
+        onClear?: (event: React.MouseEvent, choice: any) => void,
+        isDisabled?: boolean,
+    ): ReactNode | string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AutocompleteMultiple';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    selectedChipRender(choice, index, onClear, isDisabled) {
+        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);
+        return (
+            <Chip
+                key={index}
+                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}
+                isDisabled={isDisabled}
+                size={Size.s}
+                onAfterClick={onClick}
+                onClick={onClick}
+            >
+                {choice}
+            </Chip>
+        );
+    },
+    values: [],
+};
+
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
+    const {
+        anchorToInput,
+        children,
+        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        chipsAlignment,
+        className,
+        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
+        fitToAnchorWidth,
+        hasError,
+        helper,
+        icon,
+        inputRef,
+        clearButtonProps,
+        isRequired,
+        isOpen,
+        isValid,
+        label,
+        name,
+        offset,
+        onBlur,
+        onChange,
+        onClear,
+        onClose,
+        onFocus,
+        onInfiniteScroll,
+        onKeyDown,
+        placeholder,
+        placement,
+        selectedChipRender = DEFAULT_PROPS.selectedChipRender,
+        shouldFocusOnClose,
+        theme = defaultTheme,
+        type,
+        value,
+        values = DEFAULT_PROPS.values,
+        ...forwardedProps
+    } = otherProps;
+
+    return (
+        <Autocomplete
+            ref={ref}
+            {...forwardedProps}
+            anchorToInput={anchorToInput}
+            className={classNames(className, CLASSNAME)}
+            name={name}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+            shouldFocusOnClose={shouldFocusOnClose}
+            onFocus={onFocus}
+            hasError={hasError}
+            helper={helper}
+            icon={icon}
+            inputRef={inputRef}
+            chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}
+            {...disabledStateProps}
+            isRequired={isRequired}
+            clearButtonProps={clearButtonProps}
+            isValid={isValid}
+            label={label}
+            placeholder={placeholder}
+            theme={theme}
+            type={type}
+            isOpen={isOpen}
+            closeOnClick={false}
+            closeOnClickAway={closeOnClickAway}
+            closeOnEscape={closeOnEscape}
+            onClose={onClose}
+            offset={offset}
+            placement={placement}
+            fitToAnchorWidth={fitToAnchorWidth}
+            onInfiniteScroll={onInfiniteScroll}
+        >
+            {children}
+        </Autocomplete>
+    );
+});
+AutocompleteMultiple.displayName = COMPONENT_NAME;
+AutocompleteMultiple.className = CLASSNAME;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS;