@alfalab/core-components-picker-button 11.3.3 → 11.4.0

package/Component-081223cb.d.ts

@@ -95,7 +95,9 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      */
     rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для слота слева используется модификатор -left-addons, слота справа -right-addons,
+     * ошибки -error-message, текста подсказки -hint
      */
     dataTestId?: string;
     /**
@@ -199,7 +201,9 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      */
     rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для слота слева используется модификатор -left-addons, слота справа -right-addons,
+     * ошибки -error-message, текста подсказки -hint
      */
     dataTestId?: string | undefined;
     /**

package/Component-bdb4c6b9.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings-08e5596c";
+declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/{Component-e63ec8aa.d.ts → Component-c29389e5.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { OptgroupProps } from "./typings-e63ec8aa";
+import { OptgroupProps } from "./typings-c29389e5";
 declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
 export { Optgroup };

package/Component-c44170fe.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
-import React from 'react';
+import React from "react";
 import { ChangeEvent, ElementType, HTMLAttributes, InputHTMLAttributes, MouseEvent, ReactNode, RefAttributes } from "react";
 import { FormControlProps } from "./index-c44170fe";
+interface ClearButtonProps {
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    colors: "default" | "inverted";
+}
+declare const ClearButton: React.FC<ClearButtonProps>;
 type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown' | 'enterKeyHint'> & {
     /**
      * Значение поля ввода
@@ -130,7 +136,8 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     FormControlComponent?: ElementType<FormControlProps & RefAttributes<HTMLDivElement>>;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string;
     /**
@@ -269,7 +276,8 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
         defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string | undefined;
     /**
@@ -278,4 +286,4 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
     disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export * from "./Component-72dda473";
-export { BaseInputProps, BaseInput };
+export { ClearButton, BaseInputProps, BaseInput };

package/ResponsiveContext-08e5596c.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings-08e5596c";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/cssm/Component-081223cb.d.ts

@@ -95,7 +95,9 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      */
     rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для слота слева используется модификатор -left-addons, слота справа -right-addons,
+     * ошибки -error-message, текста подсказки -hint
      */
     dataTestId?: string;
     /**
@@ -199,7 +201,9 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      */
     rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для слота слева используется модификатор -left-addons, слота справа -right-addons,
+     * ошибки -error-message, текста подсказки -hint
      */
     dataTestId?: string | undefined;
     /**

package/cssm/Component-bdb4c6b9.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings-08e5596c";
+declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/cssm/{Component-e63ec8aa.d.ts → Component-c29389e5.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { OptgroupProps } from "./typings-e63ec8aa";
+import { OptgroupProps } from "./typings-c29389e5";
 declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
 export { Optgroup };

package/cssm/Component-c44170fe.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
-import React from 'react';
+import React from "react";
 import { ChangeEvent, ElementType, HTMLAttributes, InputHTMLAttributes, MouseEvent, ReactNode, RefAttributes } from "react";
 import { FormControlProps } from "./index-c44170fe";
+interface ClearButtonProps {
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    colors: "default" | "inverted";
+}
+declare const ClearButton: React.FC<ClearButtonProps>;
 type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown' | 'enterKeyHint'> & {
     /**
      * Значение поля ввода
@@ -130,7 +136,8 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type
      */
     FormControlComponent?: ElementType<FormControlProps & RefAttributes<HTMLDivElement>>;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string;
     /**
@@ -269,7 +276,8 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
         defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
      */
     dataTestId?: string | undefined;
     /**
@@ -278,4 +286,4 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
     disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export * from "./Component-72dda473";
-export { BaseInputProps, BaseInput };
+export { ClearButton, BaseInputProps, BaseInput };

package/cssm/ResponsiveContext-08e5596c.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings-08e5596c";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/cssm/field/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ButtonProps } from "@alfalab/core-components-button";
-import { FieldProps as BaseFieldProps } from "../typings-e63ec8aa";
+import { FieldProps as BaseFieldProps } from "../typings-c29389e5";
 import { PickerButtonSize, PickerButtonVariant } from "../types";
 type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
     buttonSize?: PickerButtonSize;

package/cssm/field/index.module.css

@@ -1,6 +1,6 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* 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 */
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06); /* 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 */
 } :root {
 } :root {
@@ -26,5 +26,5 @@
     } .open {
     transform: var(--arrow-transform);
 } .linkOpen:not(:hover) {
-    background-color: var(--color-light-neutral-translucent-100);
+    background-color: var(--color-light-transparent-default-hover);
 }

package/cssm/index-bdb4c6b9.d.ts

@@ -0,0 +1,223 @@
+/// <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, RefObject } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { BackdropProps } from "./index-ebda875c";
+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;
+    /**
+     * Дополнительные пропсы на dialog wrapper
+     */
+    wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительные пропсы на обертку контента
+     */
+    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 restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement) => void;
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): 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, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
+export type { SavedStyle };

package/cssm/index-ebda875c.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react-transition-group" />
 /// <reference types="react" />
 export * from "./Component-c44170fe";

package/cssm/typings-08e5596c.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "./index-bdb4c6b9";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };