@alfalab/core-components-input-autocomplete 10.2.3 → 11.0.0

package/src/Component.mobile.tsx

@@ -1,140 +1,75 @@
-import React, { ChangeEvent, ElementType, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Ref, useMemo, useRef, useState } 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 { SelectMobile, SelectMobileProps } from '@alfalab/core-components-select/mobile';
-import type {
-    AdditionalMobileProps,
-    BaseSelectChangePayload,
-    BaseSelectProps,
+import {
+    SelectMobile,
+    SelectMobileProps,
+    SelectModalMobile,
+} from '@alfalab/core-components-select/mobile';
+import {
+    AnyObject,
+    BottomSheetSelectMobileProps,
+    Footer,
+    ModalSelectMobileProps,
 } from '@alfalab/core-components-select/shared';
 
 import { AutocompleteMobileField } from './autocomplete-mobile-field';
+import { InputAutocompleteMobileProps } from './types';
+import { searchFilterStub } from './utils';
 
 import styles from './mobile.module.css';
 
-export type InputAutocompleteMobileProps = Omit<
-    BaseSelectProps,
-    | 'OptionsList'
-    | 'Checkmark'
-    | 'onScroll'
-    | 'nativeSelect'
-    | 'autocomplete'
-    | 'valueRenderer'
-    | 'searchProps'
-    | 'showSearch'
-    | 'Search'
-> & {
-    /**
-     * Обработчик выбора
-     */
-    onChange: (payload: string | BaseSelectChangePayload) => void;
-
-    /**
-     * Обработчик ввода фильтра.
-     */
-    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
-
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-
-    /**
-     * Значение фильтра.
-     */
-    filter?: string;
-
-    /**
-     * Обработчик нажатия на кнопку "Отмена".
-     */
-    onCancel?: () => void;
-
-    /**
-     * Обработчик нажатия на крестик в инпуте фильтра.
-     */
-    onClearFilter?: () => void;
-
-    /**
-     * Дополнительные пропсы компонента BottomSheet
-     */
-    bottomSheetProps?: AdditionalMobileProps['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 = '',
+            value,
             name,
             Arrow = null,
             label,
-            placeholder,
+            placeholder = '',
             size = 's',
             open: openProp,
-            onFilter,
-            onChange,
+            onInput,
             onOpen,
-            onCancel,
-            onClearFilter,
-            continueButtonProps,
-            cancelButtonProps,
-            selected,
             multiple,
+            inputProps,
+            isBottomSheet = true,
+            dataTestId,
+            transitionProps,
             ...restProps
         }: InputAutocompleteMobileProps,
         ref,
     ) => {
         const [open, setOpen] = useState(false);
-        const bottomSheetInputRef = useRef<HTMLInputElement>(null);
+        const frozenValue = useRef<string>('');
+        const searchInputRef = useRef<HTMLInputElement>(null);
         const targetRef = useRef<HTMLDivElement>(null);
 
-        const setBottomSheetVisibility = (isOpen: boolean) => {
+        const restorePrevValue = () => onInput?.(null, { value: frozenValue.current });
+
+        const setModalVisibility = (isOpen: boolean) => {
             if (openProp === undefined) {
                 setOpen(isOpen);
             }
 
-            if (onOpen) {
-                onOpen({ open: isOpen, name });
+            if (isOpen) {
+                frozenValue.current = value || '';
             }
+
+            onOpen?.({ open: isOpen, name });
         };
 
         const handleOpen: SelectMobileProps['onOpen'] = (payload) => {
-            setBottomSheetVisibility(Boolean(payload.open));
+            setModalVisibility(Boolean(payload.open));
         };
 
         const handleOptionsListTouchMove = useMemo(
             () =>
                 throttle(() => {
-                    const input = bottomSheetInputRef.current;
+                    const input = searchInputRef.current;
 
                     if (input && document.activeElement === input) {
                         input.blur();
@@ -143,119 +78,86 @@ export const InputAutocompleteMobile = React.forwardRef(
             [],
         );
 
-        const handleApply = () => {
-            setBottomSheetVisibility(false);
-            onChange(filter);
-        };
-
-        const handleChange: SelectMobileProps['onChange'] = (payload) => {
-            onChange(payload);
-
-            if (multiple) {
-                // После выбора опции возвращаем фокус в поле ввода.
-                bottomSheetInputRef.current?.focus();
-            }
-        };
+        const handleApply = () => setModalVisibility(false);
 
         const handleCancel = () => {
-            setBottomSheetVisibility(false);
-
-            if (onCancel) {
-                onCancel();
-            }
+            setModalVisibility(false);
+            restorePrevValue();
         };
 
-        const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-            const input = bottomSheetInputRef.current;
-
-            // Перед закрытием шторки снимаем фокус с инпута, чтобы предотвратить скачок шторки.
-            if (
-                event.relatedTarget === targetRef.current &&
-                input &&
-                input === document.activeElement
-            ) {
-                input.blur();
-            }
+        const handleExiting = (node: HTMLElement) => {
+            targetRef.current?.focus();
+            transitionProps?.onExiting?.(node);
         };
 
-        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,
-                },
-            };
+        const isOpen = Boolean(open || openProp);
+
+        const Component = isBottomSheet ? SelectMobile : SelectModalMobile;
+
+        const componentProps:
+            | ModalSelectMobileProps['modalProps']
+            | BottomSheetSelectMobileProps['bottomSheetProps'] = {
+            title: label || placeholder,
+            onClose: restorePrevValue,
+            transitionProps: {
+                ...transitionProps,
+                onExiting: handleExiting,
+            },
+            [isBottomSheet ? 'containerProps' : 'componentDivProps']: {
+                onTouchMove: handleOptionsListTouchMove,
+            },
         };
 
         return (
-            <SelectMobile
-                useWithApplyHook={false}
+            <Component
                 Field={AutocompleteMobileField}
                 {...restProps}
+                {...(isBottomSheet
+                    ? { bottomSheetProps: componentProps }
+                    : { modalProps: componentProps })}
+                dataTestId={dataTestId}
+                useWithApplyHook={false}
+                showSearch={true}
+                searchProps={{
+                    value,
+                    filterFn: searchFilterStub,
+                    componentProps: {
+                        leftAddons: null,
+                        placeholder,
+                        ...inputProps,
+                        className: cn(styles.input, inputProps?.className),
+                        clear: inputProps?.clear ?? false,
+                        ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),
+                        onChange: onInput,
+                    },
+                }}
+                Search={Input}
                 ref={mergeRefs([targetRef, ref])}
-                selected={selected || SELECTED}
-                open={Boolean(open || openProp)}
+                open={isOpen}
                 onOpen={handleOpen}
                 Arrow={Arrow}
-                onChange={handleChange}
                 placeholder={placeholder}
                 label={label}
                 size={size}
                 name={name}
                 multiple={multiple}
-                bottomSheetProps={getBottomSheetProps()}
                 optionsListProps={{
-                    showFooter: false,
-                    ...(restProps.optionsListProps as Record<string, unknown>),
+                    footer: (
+                        <Footer
+                            showClear={true}
+                            handleClear={handleCancel}
+                            handleApply={handleApply}
+                            clearText='Отмена'
+                            applyText='Продолжить'
+                            dataTestId={dataTestId}
+                        />
+                    ),
+                    ...(restProps.optionsListProps as AnyObject),
+                }}
+                fieldProps={{
+                    value: isOpen ? frozenValue.current : value,
+                    ...(restProps.fieldProps as AnyObject),
                 }}
-                fieldProps={{ value, ...(restProps.fieldProps as Record<string, unknown>) }}
             />
         );
     },

package/src/Component.modal.mobile.tsx

@@ -1,227 +1,9 @@
-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 React from 'react';
 
-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;
-};
+import { InputAutocompleteMobile } from './Component.mobile';
+import { InputAutocompleteMobileProps } from './types';
 
 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
-                Field={AutocompleteMobileField}
-                useWithApplyHook={false}
-                {...restProps}
-                ref={mergeRefs([ref, targetRef])}
-                Arrow={Arrow}
-                onOpen={handleOpen}
-                onChange={handleChange}
-                multiple={multiple}
-                open={openProp ?? open}
-                size={size}
-                fieldProps={{ value, ...(restProps.fieldProps as Record<string, unknown>) }}
-                placeholder={placeholder}
-                name={name}
-                modalProps={{
-                    ...modalProps,
-                    componentRef: modalScrollableRef,
-                }}
-                modalHeaderProps={{
-                    ...modalHeaderProps,
-                    bottomAddons: renderBottomAddon(),
-                }}
-                modalFooterProps={{
-                    sticky: true,
-                    ...modalFooterProps,
-                    children: renderFooter(),
-                }}
-            />
-        );
-    },
-);
+    InputAutocompleteMobileProps
+>((props, ref) => <InputAutocompleteMobile {...props} ref={ref} isBottomSheet={false} />);

package/src/Component.responsive.tsx

@@ -1,40 +1,20 @@
 import React, { forwardRef } from 'react';
 
-// 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 { useMatchMedia } from '@alfalab/core-components-mq';
 
-import { InputAutocompleteDesktop, InputAutocompleteDesktopProps } from './Component.desktop';
-import { InputAutocompleteMobile, InputAutocompleteMobileProps } from './Component.mobile';
+import { InputAutocompleteDesktop } from './Component.desktop';
+import { InputAutocompleteMobile } from './Component.mobile';
+import { InputAutocompleteProps } from './types';
 
-export type InputAutocompleteResponsiveProps = InputAutocompleteDesktopProps &
-    InputAutocompleteMobileProps & {
-        /**
-         * Контрольная точка, с нее начинается desktop версия
-         * @default 1024
-         */
-        breakpoint?: number;
-    };
-
-export type InputAutocompleteMedia = 'desktop' | 'mobile';
-
-export const InputAutocompleteResponsive = forwardRef<
+export const InputAutocomplete = forwardRef<
     HTMLInputElement | HTMLDivElement,
-    InputAutocompleteResponsiveProps
->(({ breakpoint = 1024, ...restProps }, ref) => {
-    const [view] = useMedia<InputAutocompleteMedia>(
-        [
-            ['mobile', `(max-width: ${breakpoint - 1}px)`],
-            ['desktop', `(min-width: ${breakpoint}px)`],
-        ],
-        'desktop',
-    );
+    InputAutocompleteProps
+>(({ breakpoint = 1024, defaultMatchMediaValue = true, mobileProps, ...restProps }, ref) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
-    return view === 'desktop' ? (
+    return isDesktop ? (
         <InputAutocompleteDesktop {...restProps} ref={ref as React.Ref<HTMLInputElement>} />
     ) : (
-        <InputAutocompleteMobile {...restProps} ref={ref} />
+        <InputAutocompleteMobile {...restProps} {...mobileProps} ref={ref} />
     );
 });

package/src/autocomplete-field/Component.tsx

@@ -5,12 +5,12 @@ 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 { InputAutocompleteCommonProps } from '../types';
 
 import styles from './index.module.css';
 
 export type AutocompleteFieldProps = FieldProps &
-    Pick<InputAutocompleteDesktopProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
+    Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
 
 export const AutocompleteField = ({
     label,

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

@@ -53,6 +53,8 @@ export const AutocompleteMobileField = ({
     const filled = Boolean(value);
     const showPlaceholder = placeholder && !filled && labelView === 'outer';
 
+    const { tabIndex, ...restInnerProps } = innerProps;
+
     return (
         <div
             className={styles.component}
@@ -73,8 +75,10 @@ export const AutocompleteMobileField = ({
                 labelView={labelView}
                 rightAddons={Arrow}
                 dataTestId={getDataTestId(dataTestId, 'form-control')}
+                // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
+                tabIndex={open ? undefined : tabIndex}
                 {...restProps}
-                {...innerProps}
+                {...restInnerProps}
             >
                 <div className={styles.contentWrapper}>
                     {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}

package/src/desktop/index.ts

@@ -0,0 +1,2 @@
+export { InputAutocompleteDesktop } from '../Component.desktop';
+export type { InputAutocompleteCommonProps as InputAutocompleteDesktopProps } from '../types';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/index.ts

@@ -1,4 +1,2 @@
-export {
-    InputAutocompleteResponsive as InputAutocomplete,
-    InputAutocompleteResponsiveProps as InputAutocompleteProps,
-} from './Component.responsive';
+export { InputAutocomplete } from './Component.responsive';
+export type { InputAutocompleteProps } from './types';