@alfalab/core-components 40.2.0 → 41.0.1-beta.0

package/input-autocomplete/modern/Component.mobile.d.ts

@@ -1,9 +1,378 @@
+/// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { ChangeEvent, ElementType } from "react";
-import { BottomSheetProps } from "./index-7ca84eff";
+import { ChangeEvent, ElementType, HTMLAttributes, ReactNode, RefObject, FC, KeyboardEvent, MouseEvent, MutableRefObject } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { NavigationBarProps } from "./types-ebda875c";
 import { ButtonProps } from "../../button";
 import { BaseSelectChangePayload, BaseSelectProps } from "../../select";
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+    /**
+     * Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
+     */
+    immediateMount?: boolean;
+};
+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;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    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 BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type BottomSheetTitleAlign = "center" | "left";
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps["titleSize"];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps["subtitle"];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps["container"];
+    /**
+     * Дополнительный класс
+     */
+    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;
+    /**
+     * @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?: number[];
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается после притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+};
 type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
     /**
      * Обработчик выбора

package/input-autocomplete/modern/Component.mobile.js

@@ -9,7 +9,7 @@ import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.j
 import '../../form-control/modern';
 import '@alfalab/hooks';
 
-const styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_1b54m","footer":"input-autocomplete__footer_1b54m"};
+const styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_mwpo5","footer":"input-autocomplete__footer_mwpo5"};
 require('./mobile.css');
 
 const SELECTED = [];

package/input-autocomplete/modern/Component.responsive.d.ts

@@ -91,7 +91,7 @@ declare const InputAutocompleteResponsive: React.ForwardRefExoticComponent<Omit<
     filter?: string | undefined;
     onCancel?: (() => void) | undefined;
     onClearFilter?: (() => void) | undefined;
-    bottomSheetProps?: Partial<import("./index-7ca84eff").BottomSheetProps> | undefined;
+    bottomSheetProps?: Partial<import("./Component.mobile").BottomSheetProps> | undefined;
     bottomSheetHeaderAddonsProps?: Record<string, unknown> | undefined;
     continueButtonProps?: ButtonProps | undefined;
     cancelButtonProps?: ButtonProps | undefined;

package/input-autocomplete/modern/autocomplete-field/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Input } from '../../../input/modern';
 
-const styles = {"arrow":"input-autocomplete__arrow_18ogg","error":"input-autocomplete__error_18ogg"};
+const styles = {"arrow":"input-autocomplete__arrow_kg1i1","error":"input-autocomplete__error_kg1i1"};
 require('./index.css');
 
 const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input: Input$1 = Input, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {

package/input-autocomplete/modern/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 8n9lc */
-.input-autocomplete__arrow_18ogg.input-autocomplete__error_18ogg ~ * {
+/* hash: uhd12 */
+.input-autocomplete__arrow_kg1i1.input-autocomplete__error_kg1i1 ~ * {
     display: none;
 }

package/input-autocomplete/modern/autocomplete-mobile-field/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { FormControl } from '../../../form-control/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"input-autocomplete__component_1fkhm","field":"input-autocomplete__field_1fkhm","disabled":"input-autocomplete__disabled_1fkhm","placeholder":"input-autocomplete__placeholder_1fkhm","contentWrapper":"input-autocomplete__contentWrapper_1fkhm","value":"input-autocomplete__value_1fkhm","focusVisible":"input-autocomplete__focusVisible_1fkhm"};
+const styles = {"component":"input-autocomplete__component_4rsj3","field":"input-autocomplete__field_4rsj3","disabled":"input-autocomplete__disabled_4rsj3","placeholder":"input-autocomplete__placeholder_4rsj3","contentWrapper":"input-autocomplete__contentWrapper_4rsj3","value":"input-autocomplete__value_4rsj3","focusVisible":"input-autocomplete__focusVisible_4rsj3"};
 require('./index.css');
 
 const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, label, labelView = 'inner', placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }) => {

package/input-autocomplete/modern/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1rswc */
+/* hash: 1qzr2 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_1fkhm {
+} .input-autocomplete__component_4rsj3 {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_1fkhm:not(.input-autocomplete__disabled_1fkhm) {
+} .input-autocomplete__field_4rsj3:not(.input-autocomplete__disabled_4rsj3) {
     cursor: pointer;
-} .input-autocomplete__disabled_1fkhm {
+} .input-autocomplete__disabled_4rsj3 {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_1fkhm {
+} .input-autocomplete__placeholder_4rsj3 {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_1fkhm {
+} .input-autocomplete__contentWrapper_4rsj3 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_1fkhm {
+} .input-autocomplete__value_4rsj3 {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_1fkhm {
+} .input-autocomplete__focusVisible_4rsj3 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/input-autocomplete/modern/index-ebda875c.d.ts

@@ -1,40 +1,74 @@
-/// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { MouseEvent, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionProps } from "react-transition-group/Transition";
-type BackdropProps = Partial<TransitionProps> & {
+import { ButtonHTMLAttributes, ElementType, FC, AnchorHTMLAttributes } from "react";
+import { ButtonProps } from "../../button";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Прозрачный бэкдроп
+     * Вид компонента
      */
-    invisible?: boolean;
+    view: "desktop" | "mobile";
     /**
-     * Управляет видимостью компонента
+     * Дополнительный класс
      */
-    open: boolean;
+    className?: string;
     /**
-     * Обработчик клика по бэкдропу
+     * Позиция крестика
      */
-    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    align?: "left" | "right";
     /**
-     * Дополнительный класс
+     * Фиксирует крестик
      */
-    className?: string;
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
     /**
-     * Классы анимации
-     *
-     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     * Коллбэк закрытия.
      */
-    transitionClassNames?: string | CSSTransitionClassNames;
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
+    /**
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Набор цветов для компонента
      */
-    children?: ReactNode;
-};
-declare const Backdrop: React.FC<BackdropProps>;
-export { BackdropProps, Backdrop };
+    colors?: "default" | "inverted";
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    icon: ElementType<{
+        className?: string;
+    }>;
+    view?: "negative" | "tertiary" | "secondary" | "primary" | "transparent" | undefined;
+    size?: "s" | "xs" | "xxs" | undefined;
+    className?: string | undefined;
+    dataTestId?: string | undefined;
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { CloserProps, Closer, IconButtonProps, IconButton };

package/input-autocomplete/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: ymxjr */
+/* hash: d0w6t */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,11 +16,11 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .input-autocomplete__bottomSheetInput_1b54m {
+} .input-autocomplete__bottomSheetInput_mwpo5 {
     padding: 0 var(--gap-xs) var(--gap-xs);
     box-sizing: border-box;
-} .input-autocomplete__footer_1b54m {
+} .input-autocomplete__footer_mwpo5 {
     display: flex
-} .input-autocomplete__footer_1b54m > button + button {
+} .input-autocomplete__footer_mwpo5 > button + button {
         margin-left: var(--gap-m);
     }