@alfalab/core-components-input-autocomplete 9.4.7 → 10.0.0

package/src/Component.mobile.tsx

@@ -0,0 +1,251 @@
+import React, { ChangeEvent, ElementType, RefObject, useMemo, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import throttle from 'lodash.throttle';
+
+import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+import { ButtonMobile, ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { Input as CoreInput } from '@alfalab/core-components-input';
+import { SelectMobile, SelectMobileProps } from '@alfalab/core-components-select/mobile';
+import type {
+    BaseSelectChangePayload,
+    BaseSelectProps,
+} from '@alfalab/core-components-select/shared';
+
+import { AutocompleteMobileField } from './autocomplete-mobile-field';
+
+import styles from './mobile.module.css';
+
+export type InputAutocompleteMobileProps = Omit<
+    BaseSelectProps,
+    'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'
+> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+
+    /**
+     * Значение фильтра.
+     */
+    filter?: string;
+
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: () => void;
+
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: () => void;
+
+    /**
+     * Дополнительные пропсы компонента BottomSheet
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+
+    /**
+     * Дополнительные пропсы на слот под заголовком компонента BottomSheet
+     */
+    bottomSheetHeaderAddonsProps?: Record<string, unknown>;
+
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps;
+
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps;
+
+    /**
+     * Кастомный инпут
+     */
+    Input?: ElementType;
+};
+
+const SELECTED: string[] = [];
+
+export const InputAutocompleteMobile = React.forwardRef(
+    (
+        {
+            Input,
+            bottomSheetProps = {},
+            bottomSheetHeaderAddonsProps = {},
+            value = '',
+            filter = '',
+            name,
+            Arrow = null,
+            label,
+            placeholder,
+            size = 's',
+            open: openProp,
+            onFilter,
+            onChange,
+            onOpen,
+            onCancel,
+            onClearFilter,
+            continueButtonProps,
+            cancelButtonProps,
+            selected,
+            multiple,
+            ...restProps
+        }: InputAutocompleteMobileProps,
+        ref,
+    ) => {
+        const [open, setOpen] = useState(false);
+        const bottomSheetInputRef = useRef<HTMLInputElement>(null);
+        const targetRef = useRef<HTMLDivElement>(null);
+
+        const setBottomSheetVisibility = (isOpen: boolean) => {
+            if (openProp === undefined) {
+                setOpen(isOpen);
+            }
+
+            if (onOpen) {
+                onOpen({ open: isOpen, name });
+            }
+        };
+
+        const handleOpen: SelectMobileProps['onOpen'] = (payload) => {
+            setBottomSheetVisibility(Boolean(payload.open));
+        };
+
+        const handleOptionsListTouchMove = useMemo(
+            () =>
+                throttle(() => {
+                    const input = bottomSheetInputRef.current;
+
+                    if (input && document.activeElement === input) {
+                        input.blur();
+                    }
+                }, 300),
+            [],
+        );
+
+        const handleApply = () => {
+            setBottomSheetVisibility(false);
+            onChange(filter);
+        };
+
+        const handleChange: SelectMobileProps['onChange'] = (payload) => {
+            onChange(payload);
+
+            if (multiple) {
+                // После выбора опции возвращаем фокус в поле ввода.
+                bottomSheetInputRef.current?.focus();
+            }
+        };
+
+        const handleCancel = () => {
+            setBottomSheetVisibility(false);
+
+            if (onCancel) {
+                onCancel();
+            }
+        };
+
+        const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+            const input = bottomSheetInputRef.current;
+
+            // Перед закрытием шторки снимаем фокус с инпута, чтобы предотвратить скачок шторки.
+            if (
+                event.relatedTarget === targetRef.current &&
+                input &&
+                input === document.activeElement
+            ) {
+                input.blur();
+            }
+        };
+
+        const getBottomSheetProps = (): InputAutocompleteMobileProps['bottomSheetProps'] => {
+            const Component = Input || CoreInput;
+
+            return {
+                actionButton: (
+                    <div className={styles.footer}>
+                        <ButtonMobile
+                            block={true}
+                            view='secondary'
+                            size='m'
+                            onClick={handleCancel}
+                            {...cancelButtonProps}
+                        >
+                            Отмена
+                        </ButtonMobile>
+                        <ButtonMobile
+                            block={true}
+                            view='primary'
+                            size='m'
+                            onClick={handleApply}
+                            {...continueButtonProps}
+                        >
+                            Продолжить
+                        </ButtonMobile>
+                    </div>
+                ),
+                title: label || placeholder,
+                bottomAddons: (
+                    <Component
+                        block={true}
+                        clear={!!onClearFilter}
+                        onClear={onClearFilter}
+                        value={filter}
+                        onInput={onFilter}
+                        placeholder={placeholder}
+                        onFocus={handleInputFocus}
+                        {...bottomSheetHeaderAddonsProps}
+                        className={cn(
+                            styles.bottomAddonInput,
+                            bottomSheetHeaderAddonsProps.className as string,
+                        )}
+                        ref={mergeRefs([
+                            bottomSheetInputRef,
+                            bottomSheetHeaderAddonsProps.ref as RefObject<HTMLInputElement>,
+                        ])}
+                    />
+                ),
+                initialHeight: 'full',
+                ...bottomSheetProps,
+                containerProps: {
+                    onTouchMove: handleOptionsListTouchMove,
+                    ...bottomSheetProps.containerProps,
+                },
+            };
+        };
+
+        return (
+            <SelectMobile
+                ref={mergeRefs([targetRef, ref])}
+                selected={selected || SELECTED}
+                open={Boolean(open || openProp)}
+                onOpen={handleOpen}
+                onChange={handleChange}
+                Arrow={Arrow}
+                Field={AutocompleteMobileField}
+                fieldProps={{ value }}
+                placeholder={placeholder}
+                label={label}
+                size={size}
+                name={name}
+                multiple={multiple}
+                useWithApplyHook={false}
+                bottomSheetProps={getBottomSheetProps()}
+                optionsListProps={{ showFooter: false }}
+                {...restProps}
+            />
+        );
+    },
+);

package/src/Component.modal.mobile.tsx

@@ -0,0 +1,227 @@
+import React, { ChangeEvent, ElementType, RefObject, useEffect, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import throttle from 'lodash.throttle';
+
+import { ButtonMobile, ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { Input as CoreInput } from '@alfalab/core-components-input';
+import {
+    SelectMobileProps,
+    SelectModalMobile,
+    SelectModalMobileProps,
+} from '@alfalab/core-components-select/mobile';
+import type { BaseSelectChangePayload } from '@alfalab/core-components-select/shared';
+
+import { AutocompleteMobileField } from './autocomplete-mobile-field';
+
+import styles from './mobile.module.css';
+
+export type InputAutocompleteModalMobileProps = Omit<
+    SelectModalMobileProps,
+    'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'
+> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+
+    /**
+     * Значение фильтра.
+     */
+    filter?: string;
+
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: () => void;
+
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: () => void;
+
+    /**
+     * Дополнительные пропсы на слот под заголовком
+     */
+    bottomAddonProps?: Record<string, unknown>;
+
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps;
+
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps;
+
+    /**
+     * Кастомный инпут
+     */
+    Input?: ElementType;
+};
+
+export const InputAutocompleteModalMobile = React.forwardRef<
+    HTMLDivElement,
+    InputAutocompleteModalMobileProps
+>(
+    (
+        {
+            open: openProp,
+            onOpen,
+            name,
+            size = 's',
+            Input = CoreInput,
+            Arrow = null,
+            onClearFilter,
+            filter = '',
+            onFilter,
+            placeholder,
+            bottomAddonProps,
+            multiple,
+            onChange,
+            onCancel,
+            value,
+            cancelButtonProps,
+            continueButtonProps,
+            modalProps,
+            modalHeaderProps,
+            modalFooterProps,
+            ...restProps
+        }: InputAutocompleteModalMobileProps,
+        ref,
+    ) => {
+        const [open, setOpen] = React.useState(false);
+        const targetRef = useRef<HTMLDivElement>(null);
+        const modalScrollableRef = useRef<HTMLDivElement>(null);
+        const bottomAddonRef = useRef<HTMLInputElement>(null);
+
+        useEffect(() => {
+            const modalContentNode = modalScrollableRef.current;
+
+            const handleListTouchMove = throttle(() => {
+                const input = bottomAddonRef.current;
+
+                if (input && document.activeElement === input) {
+                    input.blur();
+                }
+            }, 300);
+
+            modalContentNode?.addEventListener('touchmove', handleListTouchMove);
+
+            return () => modalContentNode?.removeEventListener('touchmove', handleListTouchMove);
+        }, [open]);
+
+        const setOpenModalSelect = (isOpen: boolean) => {
+            if (openProp === undefined) {
+                setOpen(isOpen);
+            }
+
+            onOpen?.({ open: isOpen, name });
+        };
+
+        const handleOpen: SelectMobileProps['onOpen'] = (payload) => {
+            setOpenModalSelect(Boolean(payload.open));
+        };
+
+        const handleApply = () => {
+            setOpenModalSelect(false);
+            onChange(filter);
+        };
+
+        const handleCancel = () => {
+            setOpenModalSelect(false);
+            onCancel?.();
+        };
+
+        const handleChange: SelectMobileProps['onChange'] = (payload) => {
+            onChange(payload);
+
+            if (multiple) {
+                // После выбора опции возвращаем фокус в поле ввода.
+                bottomAddonRef.current?.focus();
+            }
+        };
+
+        const renderBottomAddon = () => (
+            <Input
+                block={true}
+                clear={!!onClearFilter}
+                onClear={onClearFilter}
+                value={filter}
+                onInput={onFilter}
+                placeholder={placeholder}
+                {...bottomAddonProps}
+                className={cn(styles.bottomAddonInput, bottomAddonProps?.className as string)}
+                ref={mergeRefs([
+                    bottomAddonRef,
+                    bottomAddonProps?.ref as RefObject<HTMLInputElement>,
+                ])}
+            />
+        );
+
+        const renderFooter = () => (
+            <React.Fragment>
+                <ButtonMobile
+                    block={true}
+                    view='secondary'
+                    size='m'
+                    onClick={handleCancel}
+                    {...cancelButtonProps}
+                >
+                    Отмена
+                </ButtonMobile>
+                <ButtonMobile
+                    block={true}
+                    view='primary'
+                    size='m'
+                    onClick={handleApply}
+                    {...continueButtonProps}
+                >
+                    Продолжить
+                </ButtonMobile>
+            </React.Fragment>
+        );
+
+        return (
+            <SelectModalMobile
+                ref={mergeRefs([ref, targetRef])}
+                name={name}
+                Field={AutocompleteMobileField}
+                Arrow={Arrow}
+                onOpen={handleOpen}
+                onChange={handleChange}
+                multiple={multiple}
+                open={openProp ?? open}
+                size={size}
+                fieldProps={{ value }}
+                placeholder={placeholder}
+                useWithApplyHook={false}
+                modalProps={{
+                    ...modalProps,
+                    componentRef: modalScrollableRef,
+                }}
+                modalHeaderProps={{
+                    ...modalHeaderProps,
+                    bottomAddons: renderBottomAddon(),
+                }}
+                modalFooterProps={{
+                    sticky: true,
+                    ...modalFooterProps,
+                    children: renderFooter(),
+                }}
+                {...restProps}
+            />
+        );
+    },
+);

package/src/Component.responsive.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { BaseSelectProps } from '@alfalab/core-components-select/shared';
+import { useMedia } from '@alfalab/hooks';
+
+import { InputAutocompleteDesktop, InputAutocompleteDesktopProps } from './Component.desktop';
+import { InputAutocompleteMobile, InputAutocompleteMobileProps } from './Component.mobile';
+
+export type InputAutocompleteResponsiveProps = InputAutocompleteDesktopProps &
+    InputAutocompleteMobileProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+export type InputAutocompleteMedia = 'desktop' | 'mobile';
+
+export const InputAutocompleteResponsive = forwardRef<
+    HTMLInputElement | HTMLDivElement,
+    InputAutocompleteResponsiveProps
+>(({ breakpoint = 1024, ...restProps }, ref) => {
+    const [view] = useMedia<InputAutocompleteMedia>(
+        [
+            ['mobile', `(max-width: ${breakpoint - 1}px)`],
+            ['desktop', `(min-width: ${breakpoint}px)`],
+        ],
+        'desktop',
+    );
+
+    return view === 'desktop' ? (
+        <InputAutocompleteDesktop {...restProps} ref={ref as React.Ref<HTMLInputElement>} />
+    ) : (
+        <InputAutocompleteMobile {...restProps} ref={ref} />
+    );
+});

package/src/autocomplete-field/Component.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';
+import type { FieldProps } from '@alfalab/core-components-select/shared';
+
+import { InputAutocompleteDesktopProps } from '../Component.desktop';
+
+import styles from './index.module.css';
+
+export type AutocompleteFieldProps = FieldProps &
+    Pick<InputAutocompleteDesktopProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
+
+export const AutocompleteField = ({
+    label,
+    labelView = 'inner',
+    placeholder,
+    size,
+    Arrow,
+    Input = DefaultInput,
+    value,
+    error,
+    success,
+    hint,
+    disabled,
+    readOnly,
+    onInput,
+    inputProps = {},
+    innerProps,
+}: AutocompleteFieldProps) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const { onClick, onFocus } = innerProps;
+
+    const inputDisabled = disabled || readOnly;
+
+    const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            if (onClick) onClick(event);
+
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        },
+        [onClick],
+    );
+
+    return (
+        <Input
+            {...inputProps}
+            {...innerProps}
+            wrapperRef={mergeRefs([
+                innerProps.ref as React.Ref<HTMLElement>,
+                inputProps.wrapperRef as React.Ref<HTMLElement>,
+            ])}
+            ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}
+            disabled={disabled}
+            readOnly={readOnly}
+            block={true}
+            label={label}
+            labelView={labelView}
+            placeholder={placeholder}
+            size={size}
+            error={error}
+            success={success}
+            hint={hint}
+            onChange={onInput}
+            onClick={inputDisabled ? undefined : handleClick}
+            onFocus={inputDisabled ? undefined : onFocus}
+            autoComplete='off'
+            value={value}
+            rightAddons={
+                (Arrow || inputProps.rightAddons) && (
+                    <React.Fragment>
+                        {inputProps.rightAddons}
+                        {Arrow && (
+                            <span
+                                className={cn(styles.arrow, {
+                                    [styles.error]: error,
+                                })}
+                            >
+                                {Arrow}
+                            </span>
+                        )}
+                    </React.Fragment>
+                )
+            }
+        />
+    );
+};

package/src/autocomplete-field/index.module.css

@@ -0,0 +1,3 @@
+.arrow.error ~ * {
+    display: none;
+}

package/src/autocomplete-field/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/autocomplete-mobile-field/Component.tsx

@@ -0,0 +1,74 @@
+import React, { useRef, useState } from 'react';
+import cn from 'classnames';
+
+import {
+    FormControlMobile,
+    FormControlMobileProps,
+} from '@alfalab/core-components-form-control/mobile';
+import { InputAutocompleteProps } from '@alfalab/core-components-input-autocomplete';
+import type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';
+import { useFocus } from '@alfalab/hooks';
+
+import styles from './index.module.css';
+
+export type AutocompleteMobileFieldProps = FormControlMobileProps &
+    Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> &
+    Pick<InputAutocompleteProps, 'value'>;
+
+export const AutocompleteMobileField = ({
+    size = 'm',
+    open,
+    disabled,
+    value,
+    innerProps,
+    dataTestId,
+    fieldClassName,
+    labelView = 'inner',
+    placeholder,
+    Arrow,
+    valueRenderer,
+    toggleMenu,
+    setSelectedItems,
+    selectedMultiple,
+    ...restProps
+}: AutocompleteMobileFieldProps) => {
+    const [focused, setFocused] = useState(false);
+
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
+
+    const filled = Boolean(value);
+    const showPlaceholder = placeholder && !filled && labelView === 'outer';
+
+    return (
+        <div
+            className={styles.component}
+            ref={wrapperRef}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+        >
+            <FormControlMobile
+                fieldClassName={cn(styles.field, fieldClassName, {
+                    [styles.disabled]: disabled,
+                    [styles.focusVisible]: focusVisible,
+                })}
+                block={true}
+                size={size}
+                focused={focused}
+                disabled={disabled}
+                filled={filled}
+                labelView={labelView}
+                rightAddons={Arrow}
+                data-test-id={dataTestId}
+                {...restProps}
+                {...innerProps}
+            >
+                <div className={styles.contentWrapper}>
+                    {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}
+                    {filled && <div className={styles.value}>{value}</div>}
+                </div>
+            </FormControlMobile>
+        </div>
+    );
+};