@alfalab/core-components-tabs 7.7.2 → 8.0.0

package/modern/mobile.js

@@ -1,24 +1,19 @@
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';
-export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { SecondaryTabListMobile } from './components/secondary-tablist/Component.mobile.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsMobile } from './components/tabs/Component.mobile.js';
-export { useTabs } from './hooks/use-tabs.js';
 import 'react';
 import 'classnames';
 import './components/primary-tablist/Component.js';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import './hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import './hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
-import './synthetic-events.js';
-import './components/title/Component.js';
-import './index.module-34edbfd1.js';
+import './hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/title/Component.js';
+import './index.module-264a8450.js';
+import './mobile.module-9693b0a4.js';
+import '@alfalab/core-components-tag/modern/mobile';
 import './components/secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/modern';
-import './index.module-f1cda2bf.js';
+import './index.module-fede443b.js';
 import './components/tabs/Component.js';

package/modern/mobile.module-9693b0a4.js

@@ -0,0 +1,4 @@
+const mobileStyles = {"title":"tabs__title_r50ih tabs__title_g4zpr","mobile":"tabs__mobile_r50ih"};
+require('./components/primary-tablist/mobile.css')
+
+export { mobileStyles as m };

package/{cssm/index-3e68f8db.d.ts → modern/shared-4cd3936b.d.ts}

@@ -1,18 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { FormControlProps } from "./Component-3ebe4754";
 import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
-type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
-type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
-declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
-    fieldProps?: SelectFieldProps | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { BottomSheetProps } from "./index-f12ee135";
+import { UseSelectWithApplyProps } from "./hook-9ea9e32c";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 type useSelectWithLoadingProps = {
     loading?: boolean;
@@ -68,6 +59,40 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
     };
     reset: () => void;
 };
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps["showClear"];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps["showHeaderWithSelectAll"];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -81,6 +106,10 @@ type SkeletonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -91,10 +120,15 @@ type SkeletonProps = {
     children?: ReactNode;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
-export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+};
+declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
 export * from "./index-ebda875c";
-export * from "./Component-3885b0d7";
 export * from "./Component-5e1b8383";
-export * from "./hook-3e68f8db";
+export { useSelectWithLoading, useLazyLoading, AdditionalMobileProps, SelectMobileProps, SelectMobile, SkeletonProps, Skeleton, FooterProps, Footer };
+export * from "./hook-9ea9e32c";
 export * from "./typings-5e1b8383";
 export * from "./utils-5e1b8383";

package/modern/shared.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/scrollable-container/index";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
+export * from "./typings";

package/modern/shared.js

@@ -0,0 +1,9 @@
+export { ScrollableContainer } from './components/scrollable-container/Component.js';
+export { useTabs } from './hooks/use-tabs.js';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+import 'react';
+import 'classnames';
+import 'compute-scroll-into-view';
+import '@alfalab/core-components-shared/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';

package/modern/types-4480ac4f.d.ts

@@ -0,0 +1,3 @@
+type PickerButtonSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+type PickerButtonVariant = 'default' | 'compact';
+export { PickerButtonSize, PickerButtonVariant };

package/modern/typings-5e1b8383.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
-import { InputProps, PopoverProps } from "./index-ebda875c";
+import { InputProps } from "./index-c44170fe";
+import { PopoverProps } from "./index-ebda875c";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**

package/modern/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/modern/typings.d.ts

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
-type TabsMatchMedia = 'desktop' | 'mobile';
 type TabsProps = {
     /**
      * Дополнительный класс
@@ -28,9 +27,9 @@ type TabsProps = {
      */
     size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     /**
-     * Режим отображения по умолчанию
+     * Значение по-умолчанию для хука useMatchMedia
      */
-    defaultMatch?: TabsMatchMedia;
+    defaultMatchMediaValue?: boolean | (() => boolean);
     /**
      * Мобильный вид
      */
@@ -39,10 +38,6 @@ type TabsProps = {
      * Рендерить заголовки табов в контейнере со скроллом
      */
     scrollable?: boolean;
-    /**
-     * Сворачивает не помещающиеся в окне табы в PickerButton
-     */
-    collapsible?: boolean;
     /**
      * Список табов, для контроля переноса вкладок в PickerButton
      */
@@ -69,6 +64,11 @@ type TabsProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Контрольная точка для тега, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type TabProps = {
     /**
@@ -123,7 +123,7 @@ type TabListTitle = {
     collapsed?: boolean;
     dataTestId?: string;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */
@@ -136,11 +136,12 @@ type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size'
 };
 type SecondaryTabListProps = TabListProps & {
     tagSize?: TagProps['size'];
+    TagComponent?: FC<Omit<TagProps, 'breakpoint'>>;
 };
 type UseTabsProps = TabListProps;
 type Styles = {
-    styles: {
+    styles?: {
         [key: string]: string;
     };
 };
-export { SelectedId, TabsMatchMedia, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };
+export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };

package/package.json

@@ -1,11 +1,39 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "7.7.2",
+    "version": "8.0.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./collapsible": {
+            "import": "./esm/collapsible.js",
+            "require": "./collapsible.js"
+        },
+        "./shared": {
+            "import": "./esm/shared.js",
+            "require": "./shared.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -14,10 +42,13 @@
         "@types/lodash.debounce": "^4.0.6"
     },
     "dependencies": {
-        "@alfalab/core-components-keyboard-focusable": "^4.0.7",
-        "@alfalab/core-components-tag": "^5.4.1",
-        "@alfalab/core-components-picker-button": "^10.3.30",
-        "@alfalab/core-components-badge": "^5.1.1",
+        "@alfalab/core-components-keyboard-focusable": "^4.1.0",
+        "@alfalab/core-components-tag": "^6.0.0",
+        "@alfalab/core-components-picker-button": "^11.0.0",
+        "@alfalab/core-components-badge": "^5.2.0",
+        "@alfalab/core-components-mq": "^4.2.0",
+        "@alfalab/hooks": "^1.13.0",
+        "@alfalab/core-components-shared": "^0.1.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^1.0.20",
         "@juggle/resize-observer": "^3.3.1",

package/{modern/index-3e68f8db.d.ts → shared-4cd3936b.d.ts}

@@ -1,18 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { FormControlProps } from "./Component-3ebe4754";
 import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
-type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
-type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
-declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
-    fieldProps?: SelectFieldProps | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { BottomSheetProps } from "./index-f12ee135";
+import { UseSelectWithApplyProps } from "./hook-9ea9e32c";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 type useSelectWithLoadingProps = {
     loading?: boolean;
@@ -68,6 +59,40 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
     };
     reset: () => void;
 };
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps["showClear"];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps["showHeaderWithSelectAll"];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -81,6 +106,10 @@ type SkeletonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -91,10 +120,15 @@ type SkeletonProps = {
     children?: ReactNode;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
-export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+};
+declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
 export * from "./index-ebda875c";
-export * from "./Component-3885b0d7";
 export * from "./Component-5e1b8383";
-export * from "./hook-3e68f8db";
+export { useSelectWithLoading, useLazyLoading, AdditionalMobileProps, SelectMobileProps, SelectMobile, SkeletonProps, Skeleton, FooterProps, Footer };
+export * from "./hook-9ea9e32c";
 export * from "./typings-5e1b8383";
 export * from "./utils-5e1b8383";

package/shared.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/scrollable-container/index";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
+export * from "./typings";

package/shared.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
+var hooks_useTabs = require('./hooks/use-tabs.js');
+var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
+require('react');
+require('classnames');
+require('compute-scroll-into-view');
+require('@alfalab/core-components-shared');
+require('tslib');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+
+
+
+exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
+exports.useTabs = hooks_useTabs.useTabs;
+exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;

package/src/collapsible.ts

@@ -0,0 +1,10 @@
+export {
+    TabsCollapsibleResponsive as TabsCollapsible,
+    TabsCollapsibleResponsiveProps as TabsCollapsibleProps,
+} from './components/tabs/Component.collapsible.responsive';
+export * from './components/tabs/Component.collabsible.desktop';
+export * from './components/tabs/Component.collapsible.mobile';
+export * from './components/primary-tablist/Component.collapsible.responsive';
+export * from './components/primary-tablist/Component.collapsible.desktop';
+export * from './components/primary-tablist/Component.collapsible.mobile';
+export * from './components/tab';

package/src/components/primary-tablist/Component.collapsible.desktop.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { TabListProps } from '../../typings';
+
+import { CollapsiblePrimaryTabList } from './Component.collapsible';
+
+import styles from './index.module.css';
+
+export const CollapsiblePrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (
+    <CollapsiblePrimaryTabList {...restProps} size={size} styles={styles} />
+);

package/src/components/primary-tablist/Component.collapsible.mobile.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { TabListProps } from '../../typings';
+
+import { CollapsiblePrimaryTabList } from './Component.collapsible';
+
+import commonStyles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+
+export type CollapsiblePrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+
+export const CollapsiblePrimaryTabListMobile = ({
+    className,
+    ...restProps
+}: CollapsiblePrimaryTabListMobileProps) => (
+    <CollapsiblePrimaryTabList
+        {...restProps}
+        styles={styles}
+        className={cn(className, styles.mobile)}
+    />
+);

package/src/components/primary-tablist/Component.collapsible.responsive.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { TabListProps } from '../../typings';
+
+import { CollapsiblePrimaryTabListDesktop } from './Component.collapsible.desktop';
+import { CollapsiblePrimaryTabListMobile } from './Component.collapsible.mobile';
+
+export const CollapsiblePrimaryTabListResponsive = ({
+    size,
+    fullWidthScroll,
+    breakpoint = 768,
+    defaultMatchMediaValue,
+    ...restProps
+}: TabListProps) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+
+    return isDesktop ? (
+        <CollapsiblePrimaryTabListDesktop
+            size={size}
+            defaultMatchMediaValue={defaultMatchMediaValue}
+            breakpoint={breakpoint}
+            {...restProps}
+        />
+    ) : (
+        <CollapsiblePrimaryTabListMobile
+            fullWidthScroll={fullWidthScroll}
+            defaultMatchMediaValue={defaultMatchMediaValue}
+            breakpoint={breakpoint}
+            {...restProps}
+        />
+    );
+};