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

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,77 @@
+import React, { useRef, useState } from 'react';
+import cn from 'classnames';
+
+import {
+    FormControlMobile,
+    FormControlMobileProps,
+} from '@alfalab/core-components-form-control/mobile';
+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'> & {
+        /**
+         * Значение поля ввода
+         */
+        value?: string;
+    };
+
+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>
+    );
+};

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

@@ -0,0 +1,37 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    width: 100%;
+    outline: none;
+}
+
+.field:not(.disabled) {
+    cursor: pointer;
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+}
+
+.placeholder {
+    color: var(--color-light-text-secondary);
+}
+
+.contentWrapper {
+    @mixin paragraph_component;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+}
+
+.value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+.focusVisible {
+    @mixin focus-outline;
+}

package/src/autocomplete-mobile-field/index.ts

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

package/src/desktop.ts

@@ -0,0 +1 @@
+export { InputAutocompleteDesktop, InputAutocompleteDesktopProps } from './Component.desktop';

package/src/index.ts

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

package/src/mobile.module.css

@@ -0,0 +1,14 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.bottomAddonInput {
+    padding: 0 var(--gap-xs) var(--gap-xs);
+    box-sizing: border-box;
+}
+
+.footer {
+    display: flex;
+
+    & > button + button {
+        margin-left: var(--gap-m);
+    }
+}

package/src/mobile.ts

@@ -0,0 +1,5 @@
+export { InputAutocompleteMobile, InputAutocompleteMobileProps } from './Component.mobile';
+export {
+    InputAutocompleteModalMobile,
+    InputAutocompleteModalMobileProps,
+} from './Component.modal.mobile';

package/types-d9f9bbcc.d.ts

@@ -0,0 +1,259 @@
+/// <reference types="react-transition-group" />
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     */
+    disableFocusLock?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: Array<number | string>;
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
+};
+export { BottomSheetTitleAlign, BottomSheetProps };

package/typings-5e1b8383.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
 import { InputProps } from "@alfalab/core-components-input";
+import { PopoverProps } from "./index-ebda875c";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -546,5 +547,4 @@ type CheckmarkProps = {
      */
     icon?: FC<SVGProps<SVGSVGElement>>;
 };
-export * from "./Component-ebda875c";
 export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/utils-1574ad8b.d.ts

@@ -0,0 +1,29 @@
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const getScrollbarSize: () => number;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement) => void;
+export type { SavedStyle };
+export { getModalStore, GlobalStore, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };

package/utils-49cc3c24.d.ts

@@ -0,0 +1,8 @@
+declare const TIMEOUT = 500;
+declare const SWIPE_VELOCITY = 0.4;
+declare const MARKER_HEIGHT = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const SCROLL_OFFSET = 1;
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/Component-aed0af6e.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { CheckboxProps } from "./index-ebda875c";
-type HeaderProps = {
-    checked?: boolean;
-    indeterminate?: boolean;
-    onChange?: CheckboxProps['onChange'];
-    mobile?: boolean;
-};
-declare const Header: React.FC<HeaderProps>;
-export { HeaderProps, Header };

package/Component-b4e70cb0.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { OptionShape, OptionsListProps } from "./typings-5e1b8383";
-import { HeaderProps } from "./Component-aed0af6e";
-type FooterProps = {
-    handleClear?: () => void;
-    handleApply?: () => void;
-    showClear?: boolean;
-    selectedDraft?: OptionShape[];
-};
-declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft }: FooterProps) => React.JSX.Element;
-declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
-    showClear?: boolean | undefined;
-    onClose?: (() => void) | undefined;
-    selectedDraft?: OptionShape[] | undefined;
-    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
-    Footer?: React.FC<FooterProps> | undefined;
-    Header?: React.FC<HeaderProps> | undefined;
-    headerProps?: HeaderProps | undefined;
-    showHeaderWithSelectAll?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { FooterProps, Footer, OptionsListWithApply };