@alfalab/core-components-tabs 7.2.4 → 7.2.5

package/esm/components/secondary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: 5p70f */
+/* hash: cw4b5 */
 :root {
 
     /* Hard */
@@ -44,35 +44,35 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__component_quf9b {
+.tabs__component_1bxy3 {
     position: relative;
     display: inline-flex;
 }
-.tabs__fullWidthScroll_quf9b {
+.tabs__fullWidthScroll_1bxy3 {
     margin: 0 var(--gap-m);
 }
-.tabs__container_quf9b {
+.tabs__container_1bxy3 {
     overflow: hidden;
 }
-.tabs__title_quf9b {
+.tabs__title_1bxy3 {
     white-space: nowrap;
 }
 /* sizes */
-.tabs__xxs_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__xxs_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xxs-gaps);
 }
-.tabs__xs_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__xs_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xs-gaps);
 }
-.tabs__s_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__s_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-s-gaps);
 }
-.tabs__m_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__m_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-m-gaps);
 }
-.tabs__l_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__l_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-l-gaps);
 }
-.tabs__xl_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+.tabs__xl_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xl-gaps);
 }

package/esm/components/secondary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1srp7 */
+/* hash: 1mjp4 */
 :root {
 }:root {
 }:root {
@@ -49,26 +49,26 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_quf9b {
+}.tabs__component_1bxy3 {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_quf9b {
+}.tabs__fullWidthScroll_1bxy3 {
     margin: 0 var(--gap-m);
-}.tabs__container_quf9b {
+}.tabs__container_1bxy3 {
     overflow: hidden;
-}.tabs__title_quf9b {
+}.tabs__title_1bxy3 {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}/* sizes */.tabs__xxs_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}.tabs__xs_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}.tabs__s_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}.tabs__m_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}.tabs__l_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_quf9b .tabs__title_quf9b + .tabs__title_quf9b {
+}.tabs__xl_1bxy3 .tabs__title_1bxy3 + .tabs__title_1bxy3 {
     margin-left: var(--secondary-tablist-xl-gaps);
 }
 :root {
@@ -885,8 +885,8 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_9tim9 {
+.tabs__title_etw6z {
 }
-.tabs__mobile_9tim9 .tabs__title_9tim9 + .tabs__title_9tim9 {
+.tabs__mobile_etw6z .tabs__title_etw6z + .tabs__title_etw6z {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/esm/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"tabs__component_aq3ap","hidden":"tabs__hidden_aq3ap"};
+var styles = {"component":"tabs__component_rlmfg","hidden":"tabs__hidden_rlmfg"};
 require('./index.css')
 
 var Tab = function (_a) {

package/esm/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: 1xeky */
-.tabs__component_aq3ap {
+/* hash: vdue4 */
+.tabs__component_rlmfg {
     outline: none;
 }
 
-.tabs__hidden_aq3ap {
+.tabs__hidden_rlmfg {
     display: none;
 }

package/esm/components/tabs/Component.desktop.js

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c7045249.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-442504cd.js';
 import React from 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
+import '@alfalab/core-components-picker-button/esm/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import '../../hooks/use-collapsible-elements.js';
@@ -14,11 +14,11 @@ import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-0d5bb957.js';
+import '../../index.module-06a4ba0a.js';
 import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-464ce309.js';
+import '../../index.module-fff420f1.js';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 

package/esm/components/tabs/Component.mobile.js

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c7045249.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-442504cd.js';
 import React from 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
+import '@alfalab/core-components-picker-button/esm/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import '../../hooks/use-collapsible-elements.js';
@@ -14,10 +14,10 @@ import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-0d5bb957.js';
+import '../../index.module-06a4ba0a.js';
 import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-464ce309.js';
+import '../../index.module-fff420f1.js';
 import { Tabs } from './Component.js';
 import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';

package/esm/components/tabs/Component.responsive.js

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c7045249.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-442504cd.js';
 import React from 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
+import '@alfalab/core-components-picker-button/esm/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import '../../hooks/use-collapsible-elements.js';
@@ -14,11 +14,11 @@ import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-0d5bb957.js';
+import '../../index.module-06a4ba0a.js';
 import '../primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-464ce309.js';
+import '../../index.module-fff420f1.js';
 import '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 import '../primary-tablist/Component.mobile.js';

package/esm/components/title/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-c7045249.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-442504cd.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 

package/esm/components/title/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-c7045249.js';
+import '../../tslib.es6-442504cd.js';
 import 'react';
 import 'classnames';
 export { Title } from './Component.js';

package/esm/desktop.js

@@ -1,9 +1,9 @@
-import './tslib.es6-c7045249.js';
+import './tslib.es6-442504cd.js';
 import 'react';
 import 'classnames';
-import '@alfalab/core-components/picker-button/desktop';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
+import '@alfalab/core-components-picker-button/esm/desktop';
 import '@alfalab/hooks';
 import '@juggle/resize-observer';
 export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
@@ -14,11 +14,11 @@ import 'compute-scroll-into-view';
 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 '@alfalab/core-components-tag/esm';
 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/esm/getDataTestId-3fe0d3e6.d.ts

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

package/esm/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/esm/hooks/use-collapsible-elements.js

@@ -1,4 +1,4 @@
-import { b as __spreadArray } from '../tslib.es6-c7045249.js';
+import { b as __spreadArray } from '../tslib.es6-442504cd.js';
 import { useState, useRef } from 'react';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ResizeObserver } from '@juggle/resize-observer';

package/esm/hooks/use-tablist-titles.js

@@ -1,4 +1,4 @@
-import { a as __assign } from '../tslib.es6-c7045249.js';
+import { a as __assign } from '../tslib.es6-442504cd.js';
 import { useMemo } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import '@juggle/resize-observer';

package/esm/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/esm/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/esm/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/esm/index-3fe0d3e6.d.ts

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

package/esm/index-48646db0.d.ts

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