@alfalab/core-components 42.2.1-beta.0 → 42.3.0

package/picker-button/modern/hook-9ea9e32c.d.ts

@@ -41,9 +41,9 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
         OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
-        Header?: import("react").FC<import("./Component-aed0af6e").HeaderProps> | undefined;
-        headerProps?: import("./Component-aed0af6e").HeaderProps | undefined; /**
+        Footer?: import("react").FC<import("./Component-5e1b8383").FooterProps> | undefined;
+        Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
          * Показывать кнопку очистки
          */
         showHeaderWithSelectAll?: boolean | undefined;
@@ -71,5 +71,5 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
-export * from "./Component-ebda875c";
+export * from "./Component-5e1b8383";
 export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/picker-button/modern/index-50136800.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
-import React from "react";
-import { PaddingType } from "./index-72dda473";
 declare const isClient: () => boolean;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
 };
-export { isClient, getDataTestId, createPaddingStyle, easingFns };
+export { isClient, getDataTestId, easingFns };
+export * from "./createPaddingStyle-72dda473";

package/picker-button/modern/index-bdb4c6b9.d.ts

@@ -1,180 +1,2 @@
-/// <reference types="react" />
-/// <reference types="react-transition-group" />
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React from "react";
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
-import { TransitionProps } from "react-transition-group/Transition";
-import { BackdropProps, PortalProps } from "./index-ebda875c";
-type BaseModalProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Компонент бэкдропа
-     */
-    Backdrop?: FC<BackdropProps>;
-    /**
-     * Свойства для Бэкдропа
-     */
-    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps["getPortalContainer"];
-    /**
-     * Отключает автоматический перевод фокуса на модалку при открытии
-     * @default false
-     */
-    disableAutoFocus?: boolean;
-    /**
-     * Отключает ловушку фокуса
-     * @default false
-     */
-    disableFocusLock?: boolean;
-    /**
-     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
-     * @default false
-     */
-    disableRestoreFocus?: boolean;
-    /**
-     * Отключает вызов `callback` при нажатии Escape
-     * @default false
-     */
-    disableEscapeKeyDown?: boolean;
-    /**
-     * Отключает вызов `callback` при клике на бэкдроп
-     * @default false
-     */
-    disableBackdropClick?: boolean;
-    /**
-     * Отключает блокировку скролла при открытии модального окна
-     * @default false
-     */
-    disableBlockingScroll?: boolean;
-    /**
-     * Содержимое модалки всегда в DOM
-     * @default false
-     */
-    keepMounted?: boolean;
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительные пропсы на обертку контента
-     */
-    contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    /**
-     * Дополнительные пропсы на компонентную обертку контента
-     */
-    componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    /**
-     * Дополнительный класс для обертки (Modal)
-     */
-    wrapperClassName?: string;
-    /**
-     * Обработчик скролла контента
-     */
-    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
-    /**
-     * Пропсы для анимации (CSSTransition)
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Рендерить ли в контейнер через портал.
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Обработчик события нажатия на бэкдроп
-     */
-    onBackdropClick?: (event: MouseEvent) => void;
-    /**
-     * Обработчик события нажатия на Escape
-     *
-     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Обработчик закрытия
-     */
-    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-    /**
-     * Обработчик события onEntered компонента Transition
-     */
-    onMount?: () => void;
-    /**
-     * Обработчик события onExited компонента Transition
-     */
-    onUnmount?: () => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Реф, который должен быть установлен компонентной области
-     */
-    componentRef?: MutableRefObject<HTMLDivElement | null>;
-};
-type BaseModalContext = {
-    parentRef: React.RefObject<HTMLDivElement>;
-    componentRef: React.RefObject<HTMLDivElement>;
-    hasFooter?: boolean;
-    hasHeader?: boolean;
-    hasScroll?: boolean;
-    headerHighlighted?: boolean;
-    footerHighlighted?: boolean;
-    headerOffset?: number;
-    setHeaderOffset: (offset: number) => void;
-    contentRef: Ref<HTMLElement>;
-    setHasHeader: (exists: boolean) => void;
-    setHasFooter: (exists: boolean) => void;
-    onClose: Required<BaseModalProps>["onClose"];
-};
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-declare const BaseModalContext: React.Context<BaseModalContext>;
-declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
-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;
-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;
-}
-export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, getModalStore, GlobalStore };
-export type { SavedStyle };
+export * from "./Component-ebda875c";
+export * from "./utils-1574ad8b";

package/picker-button/modern/index-c44170fe.d.ts

@@ -1,6 +1,142 @@
 /// <reference types="react" />
 import React from "react";
-import { BaseInputProps } from "./index-ebda875c";
+import { ChangeEvent, ElementType, InputHTMLAttributes, MouseEvent, ReactNode } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "enterKeyHint"> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Начальное значение поля
+     */
+    defaultValue?: string;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Крестик для очистки поля
+     */
+    clear?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer";
+    /**
+     * Атрибут type
+     */
+    type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
+    /**
+     * Ref для обертки input
+     */
+    wrapperRef?: React.Ref<HTMLDivElement> | null;
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под инпутом
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
+    /**
+     * Класс, который будет установлен при фокусе
+     */
+    focusedClassName?: string;
+    /**
+     * Класс, который будет установлен, если в поле есть значение
+     */
+    filledClassName?: string;
+    /**
+     * Обработчик поля ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик клика по полю
+     */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseDown по полю
+     */
+    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseUp по полю
+     */
+    onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    FormControlComponent?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStyles?: StyleColors;
+};
 type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -12,11 +148,13 @@ type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> &
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "colorStyles" | "FormControlComponent"> & {
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
 declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
-export { InputProps, Input, InputDesktopProps, InputDesktop };
+type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
 export * from "./Component.desktop-785df74d";

package/picker-button/modern/index-ebda875c.d.ts

@@ -1,32 +1,81 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ReactNode } from "react";
-type SkeletonProps = {
+import { ButtonHTMLAttributes, ElementType, FC, AnchorHTMLAttributes, ReactElement } from "react";
+import { ButtonProps } from "../../button";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     * Вид компонента
      */
-    visible?: boolean;
+    view: "desktop" | "mobile";
     /**
-     * Флаг явного включения анимации скелета
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
+    /**
+     * Размер компонента
      */
-    animate?: boolean;
+    size?: "xxs" | "xs" | "s";
     /**
      * Дополнительный класс
      */
     className?: string;
     /**
-     * Дополнительные инлайн стили
+     * Выравнивание иконки
+     * @default 'center'
      */
-    style?: React.CSSProperties;
+    alignIcon?: "left" | "center" | "right";
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Набор цветов для компонента
      */
-    children?: ReactNode;
-};
-declare const Skeleton: React.FC<SkeletonProps>;
-export { SkeletonProps, Skeleton };
+    colors?: "default" | "inverted";
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
+    size?: "s" | "xs" | "xxs" | undefined;
+    className?: string | undefined;
+    alignIcon?: "center" | "right" | "left" | undefined;
+    dataTestId?: string | undefined;
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { CloserProps, Closer, IconButtonProps, IconButton };