@alfalab/core-components 36.3.0 → 36.3.1

package/tabs/modern/desktop.js

@@ -1,11 +1,11 @@
 import 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import '../../badge/modern';
 import '../../keyboard-focusable/modern';
+import '../../picker-button/modern/desktop';
 export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 export { useTabs } from './hooks/use-tabs.js';
 import './hooks/use-tablist-titles.js';
@@ -13,11 +13,11 @@ import './synthetic-events.js';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-0d5bb957.js';
+import './index.module-06a4ba0a.js';
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-464ce309.js';
+import './index.module-fff420f1.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/tabs/modern/getDataTestId-3fe0d3e6.d.ts

@@ -0,0 +1,2 @@
+declare const getDataTestId: (dataTestId?: string | undefined, element?: string | undefined) => string | undefined;
+export { getDataTestId };

package/tabs/modern/hook-edac5428.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
+type useSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, showClear, showSelectAll, }: useSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<unknown>> | undefined;
+    } & import("react").RefAttributes<unknown>>;
+    optionsListProps: {
+        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./index-3e68f8db").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+};
+export { SELECT_ALL_KEY, useSelectWithApply };

package/tabs/modern/index-0d7ca9a7.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from "react";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { ButtonProps } from "./index-ebda875c";
+import { AdditionalMobileProps } from "./index-3e68f8db";
+import { PickerButtonDesktopProps } from "./Component-0d7ca9a7";
+type PickerButtonMatchMedia = "desktop" | "mobile";
+type PickerButtonProps = PickerButtonDesktopProps & AdditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const PickerButton: React.ForwardRefExoticComponent<Omit<import("./index-3e68f8db").BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
+    options: ((import("./index-3e68f8db").OptionShape | import("./index-3e68f8db").GroupShape) & {
+        icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
+    })[];
+    size?: import("./Component-0d7ca9a7").PickerButtonSize | undefined;
+    variant?: import("./Component-0d7ca9a7").PickerButtonVariant | undefined;
+} & AdditionalMobileProps & {
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+type PickerButtonMobileProps = Omit<PickerButtonDesktopProps, "OptionsList" | "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const PickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "onScroll" | "OptionsList" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { PickerButtonMatchMedia, PickerButtonProps, PickerButton, PickerButtonMobileProps, PickerButtonMobile };
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-0d7ca9a7";

package/tabs/modern/index-136acbb1.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FC, ReactNode } from "react";
+/**
+ * Набор констант для 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>;
+export { stackingOrder, StackingContext, StackProps, Stack };

package/tabs/modern/index-3e68f8db.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { FormControlProps } from "./Component-e67996e9";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-85892853";
+type SelectFieldProps = FormControlProps & Record<string, unknown>;
+type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
+    fieldProps?: SelectFieldProps | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+// 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) => 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) => 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;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+export * from "./hook-edac5428";
+export * from "./index-48646db0";
+export * from "./typings-85892853";
+export * from "./utils-85892853";

package/tabs/modern/index-3fe0d3e6.d.ts

@@ -0,0 +1 @@
+export * from "./getDataTestId-3fe0d3e6";

package/tabs/modern/index-48646db0.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-85892853";
+export * from "./index-ebda875c";

package/tabs/modern/index-7ca84eff.d.ts

@@ -0,0 +1,196 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from "react";
+import { HTMLAttributes, ReactNode, FC } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { SwipeableHandlers } from "react-swipeable/types";
+import { BackdropProps } from "./index-ebda875c";
+type BottomSheetTitleAlign = "center" | "left";
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс шапки
+     */
+    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"];
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+};
+/* Верхний отступ шторки, если она открыта на максимальную высоту */
+declare const HEADER_OFFSET = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+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 { BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop };

package/tabs/modern/index-bdb4c6b9.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-ebda875c";
+export * from "./utils-1574ad8b";

package/tabs/modern/index-e67996e9.d.ts

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

package/tabs/modern/index-ebda875c.d.ts

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

package/tabs/modern/index.js

@@ -1,11 +1,11 @@
 import 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import '../../badge/modern';
 import '../../keyboard-focusable/modern';
+import '../../picker-button/modern/desktop';
 import './hooks/use-collapsible-elements.js';
 export { useTabs } from './hooks/use-tabs.js';
 import './hooks/use-tablist-titles.js';
@@ -13,11 +13,11 @@ import './synthetic-events.js';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-0d5bb957.js';
+import './index.module-06a4ba0a.js';
 import './components/primary-tablist/Component.desktop.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-464ce309.js';
+import './index.module-fff420f1.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/tabs/modern/index.module-06a4ba0a.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1o8kx","fullWidthScroll":"tabs__fullWidthScroll_1o8kx","container":"tabs__container_1o8kx","title":"tabs__title_1o8kx","disabled":"tabs__disabled_1o8kx","focused":"tabs__focused_1o8kx","collapsed":"tabs__collapsed_1o8kx","selected":"tabs__selected_1o8kx","line":"tabs__line_1o8kx","s":"tabs__s_1o8kx","xs":"tabs__xs_1o8kx","xxs":"tabs__xxs_1o8kx","pickerWrapper":"tabs__pickerWrapper_1o8kx","option":"tabs__option_1o8kx","m":"tabs__m_1o8kx","l":"tabs__l_1o8kx","xl":"tabs__xl_1o8kx","rightAddons":"tabs__rightAddons_1o8kx"};
+require('./components/primary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/index.module-fff420f1.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1bxy3","fullWidthScroll":"tabs__fullWidthScroll_1bxy3","container":"tabs__container_1bxy3","title":"tabs__title_1bxy3","xxs":"tabs__xxs_1bxy3","xs":"tabs__xs_1bxy3","s":"tabs__s_1bxy3","m":"tabs__m_1bxy3","l":"tabs__l_1bxy3","xl":"tabs__xl_1bxy3"};
+require('./components/secondary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/mobile.js

@@ -1,11 +1,11 @@
 import 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import '../../badge/modern';
 import '../../keyboard-focusable/modern';
+import '../../picker-button/modern/desktop';
 import './hooks/use-collapsible-elements.js';
 export { useTabs } from './hooks/use-tabs.js';
 import './hooks/use-tablist-titles.js';
@@ -13,10 +13,10 @@ import './synthetic-events.js';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-0d5bb957.js';
+import './index.module-06a4ba0a.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-464ce309.js';
+import './index.module-fff420f1.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/tabs/modern/responsive.js

@@ -1,11 +1,11 @@
 import 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import 'compute-scroll-into-view';
 import '../../badge/modern';
 import '../../keyboard-focusable/modern';
+import '../../picker-button/modern/desktop';
 export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 export { useTabs } from './hooks/use-tabs.js';
 import './hooks/use-tablist-titles.js';
@@ -13,11 +13,11 @@ import './synthetic-events.js';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-0d5bb957.js';
+import './index.module-06a4ba0a.js';
 import './components/primary-tablist/Component.desktop.js';
 import '../../tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-464ce309.js';
+import './index.module-fff420f1.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';