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

package/cssm/index-ebda875c.d.ts

@@ -1,98 +1,136 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
-type NativeProps = InputHTMLAttributes<HTMLInputElement>;
-type Align = "start" | "center";
-type CheckboxProps = Omit<NativeProps, "size" | "onChange" | "enterKeyHint"> & {
+import { HTMLAttributes, ReactNode } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * Управление состоянием вкл/выкл чекбокса (native prop)
+     * Растягивает компонент на ширину контейнера
      */
-    checked?: boolean;
+    block?: boolean;
     /**
-     * Обработчик переключения чекбокса
+     * Размер компонента
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
-        checked: boolean;
-        name?: string;
-    }) => void;
+    size?: "s" | "m" | "l" | "xl";
     /**
-     * Текст подписи к чекбоксу
+     * Набор цветов для компонента
      */
-    label?: ReactNode;
+    colors?: "default" | "inverted";
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
-     * Текст подсказки снизу
+     * Текст подсказки
      */
     hint?: ReactNode;
     /**
-     * Размер компонента
+     * Лейбл компонента
      */
-    size?: "s" | "m";
+    label?: ReactNode;
     /**
-     * Доп. класс чекбокса
+     * Вид лейбла внутри / снаружи
      */
-    boxClassName?: string;
+    labelView?: "inner" | "outer";
     /**
-     * Доп. класс контента
+     * Слот слева
      */
-    contentClassName?: string;
+    leftAddons?: ReactNode;
     /**
-     * Выравнивание
+     * Слот справа
      */
-    align?: Align;
+    rightAddons?: ReactNode;
     /**
-     * Дополнительный слот
+     * Слот под полем
      */
-    addons?: React.ReactNode;
+    bottomAddons?: ReactNode;
     /**
-     * Растягивать ли компонент на всю ширину
+     * Дополнительный класс
      */
-    block?: boolean;
+    className?: string;
     /**
-     * Управление состоянием включен / выключен
+     * Дополнительный класс для поля
      */
-    disabled?: boolean;
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    inputWrapperClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
     /**
-     * Управление состоянием активен / неактивен
+     * Дополнительный класс для аддонов
      */
-    inactive?: boolean;
+    addonsClassName?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Управление неопределенным состоянием чекбокса
+     * Компонент поля (инпут, textarea и пр.)
      */
-    indeterminate?: boolean;
+    children?: ReactNode;
     /**
-     * Отображение ошибки
+     * Основные стили компонента.
      */
-    error?: ReactNode | boolean;
+    styles: {
+        [key: string]: string;
+    };
     /**
-     * Флаг для скрытия нативного инпута.
-     * @default false
+     * Стили компонента для default и inverted режима.
      */
-    hiddenInput?: boolean;
+    colorStyles?: StyleColors;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<NativeProps, "size" | "onChange" | "enterKeyHint"> & {
-    checked?: boolean | undefined;
-    onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
-        checked: boolean;
-        name?: string;
-    }) => void) | undefined;
-    label?: ReactNode;
-    hint?: ReactNode;
-    size?: "s" | "m" | undefined;
-    boxClassName?: string | undefined;
-    contentClassName?: string | undefined;
-    align?: Align | undefined;
-    addons?: React.ReactNode;
+declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     block?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    colors?: "default" | "inverted" | undefined;
     disabled?: boolean | undefined;
-    inactive?: boolean | undefined;
-    dataTestId?: string | undefined;
-    indeterminate?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    filled?: boolean | undefined;
+    focused?: boolean | undefined;
     error?: ReactNode | boolean;
-    hiddenInput?: boolean | undefined;
-} & React.RefAttributes<HTMLLabelElement>>;
-export { CheckboxProps, Checkbox };
+    hint?: ReactNode;
+    label?: ReactNode;
+    labelView?: "inner" | "outer" | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    bottomAddons?: ReactNode;
+    className?: string | undefined;
+    fieldClassName?: string | undefined;
+    inputWrapperClassName?: string | undefined;
+    labelClassName?: string | undefined;
+    addonsClassName?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: ReactNode;
+    styles: {
+        [key: string]: string;
+    };
+    colorStyles?: StyleColors | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { StyleColors, BaseFormControlProps, BaseFormControl };

package/cssm/index-f12ee135.d.ts

@@ -1,271 +1,3 @@
-/// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from "react";
-import { HTMLAttributes, ReactNode, RefObject, FC } from "react";
-import { TransitionProps } from "react-transition-group/Transition";
-import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
-import { SwipeableHandlers } from "react-swipeable";
-import { BackdropProps } from "./index-ebda875c";
-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;
-    /**
-     * Слот слева
-     */
-    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;
-    /**
-     * Обработчик закрытия
-     */
-    onClose: () => void;
-    /**
-     * Обработчик нажатия на стрелку назад
-     */
-    onBack?: () => void;
-    /**
-     * Вызывается после притягивания к одной из `magneticAreas`
-     */
-    onMagnetize?: (index: number) => void;
-};
-declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-declare const TIMEOUT = 500;
-declare const SWIPE_VELOCITY = 0.4;
-declare const MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-declare const HEADER_OFFSET = 24;
-declare const CLOSE_OFFSET = 0.2;
-declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
-    headerRef: RefObject<HTMLDivElement>;
-};
-declare const Header: FC<HeaderProps>;
-type FooterProps = {
-    /**
-     * Контент футера
-     */
-    children?: ReactNode;
-    /**
-     * Фиксирует футер
-     */
-    sticky?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-};
-declare const Footer: FC<FooterProps>;
-type SwipeableBackdropProps = BackdropProps & {
-    /**
-     * Прозрачность бэкдропа
-     */
-    opacity?: number;
-    /**
-     * Обработчики свайпа
-     */
-    handlers?: SwipeableHandlers;
-    /**
-     * Время анимации opacity
-     */
-    opacityTimeout?: number;
-};
-declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
-export { BottomSheet, TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber, HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop };
-export type { BottomSheetProps, BottomSheetTitleAlign };
+export * from "./component-89a3cf4c";
+export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
+export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/cssm/index.d.ts

@@ -1,3 +1,2 @@
-export { InputAutocompleteDesktop as InputAutocomplete } from "./Component.desktop";
-export type { InputAutocompleteDesktopProps as InputAutocompleteProps } from "./Component.desktop";
-export * from "./responsive";
+export { InputAutocompleteResponsive as InputAutocomplete, InputAutocompleteResponsiveProps as InputAutocompleteProps } from "./Component.responsive";
+export {};

package/cssm/index.js

@@ -2,26 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_desktop = require('./Component.desktop.js');
 var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
-require('@alfalab/core-components-select/cssm');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('@alfalab/core-components-select/cssm/shared');
 require('./autocomplete-field/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('@alfalab/core-components-input/cssm');
+require('@alfalab/core-components-input/cssm/desktop');
 require('./autocomplete-field/index.module.css');
-require('@alfalab/hooks');
 require('./Component.mobile.js');
 require('lodash.throttle');
-require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-button/cssm/mobile');
+require('@alfalab/core-components-input/cssm');
+require('@alfalab/core-components-select/cssm/mobile');
 require('./autocomplete-mobile-field/Component.js');
-require('@alfalab/core-components-form-control/cssm');
+require('@alfalab/core-components-form-control/cssm/mobile');
 require('./autocomplete-mobile-field/index.module.css');
 require('./mobile.module.css');
 
 
 
-exports.InputAutocomplete = Component_desktop.InputAutocompleteDesktop;
-exports.InputAutocompleteResponsive = Component_responsive.InputAutocompleteResponsive;
+exports.InputAutocomplete = Component_responsive.InputAutocompleteResponsive;

package/cssm/mobile-06ffd24b.d.ts

@@ -0,0 +1,5 @@
+export { SelectMobile } from "./Component.mobile-06ffd24b";
+export { SelectModalMobile } from "./Component.modal.mobile-5e1b8383";
+export type { SelectMobileProps } from "./Component.mobile-06ffd24b";
+export type { SelectModalMobileProps } from "./Component.modal.mobile-5e1b8383";
+export {};

package/cssm/mobile-96988a65.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export * from "./Component.mobile-ebda875c";
+export {};

package/cssm/mobile.d.ts

@@ -1,3 +1,3 @@
-export * from "./Component.mobile";
-export * from "./Component.modal.mobile";
+export { InputAutocompleteMobile, InputAutocompleteMobileProps } from "./Component.mobile";
+export { InputAutocompleteModalMobile, InputAutocompleteModalMobileProps } from "./Component.modal.mobile";
 export {};

package/cssm/mobile.js

@@ -9,15 +9,14 @@ require('react');
 require('react-merge-refs');
 require('classnames');
 require('lodash.throttle');
-require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-button/cssm/mobile');
 require('@alfalab/core-components-input/cssm');
-require('@alfalab/core-components-select/cssm');
+require('@alfalab/core-components-select/cssm/mobile');
 require('./autocomplete-mobile-field/Component.js');
-require('@alfalab/core-components-form-control/cssm');
+require('@alfalab/core-components-form-control/cssm/mobile');
 require('@alfalab/hooks');
 require('./autocomplete-mobile-field/index.module.css');
 require('./mobile.module.css');
-require('@alfalab/core-components-select/cssm/mobile');
 
 
 

package/cssm/shared-4cd3936b.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps["visibleOptions"];
+    Option?: React.FC<OptionProps>;
+};
+declare function useSelectWithLoading({ loading, visibleOptions, Option }: useSelectWithLoadingProps): {
+    Option: (props: OptionProps) => React.JSX.Element;
+    options: OptionShape[];
+} | null;
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
+};
+declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option }: useLazyLoadingProps): {
+    optionsProps: {
+        Option: (props: OptionProps) => React.JSX.Element;
+        options: OptionShape[];
+        optionsListProps: {
+            ref: React.RefObject<HTMLDivElement>;
+            inputProps: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                    value: string;
+                }) => void;
+                value: string;
+            };
+        };
+        onOpen: (payload: {
+            open?: boolean;
+        }) => void;
+    };
+    reset: () => void;
+};
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+export * from "./index-ebda875c";
+export * from "./Component-5e1b8383";
+export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+export * from "./hook-9ea9e32c";
+export * from "./typings-5e1b8383";
+export * from "./utils-5e1b8383";
+export type { AdditionalMobileProps } from "./Component.mobile-06ffd24b";