@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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